<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <form id="form1" action="">

        <input type="text" name="username" placeholder="请输入用户名">

        <input type="password" name="password" placeholder="请输入密码">

        <input type="password" name="password2" placeholder="请确认密码">

        <input type="text" name="email" placeholder="请输入邮箱">

    </form>

    <script type="text/javascript">

        (function(){

            //检测是否支持placeholder

            if('placeholder' in document.createElement('input')) return;

            var form = document.getElementById('form1'),

                inputs = form.getElementsByTagName('input'),

                i,input,value,type;

            //获取焦点事件

            var focus = function(value,type){

                return function(){

                    if(this.value === value) this.value = '';

                    if(this.value === '' && type === 'password'){

                        try {

                            this.type = 'password';

                        }catch(e){

                            this.style.visibility = 'hidden';

                            this.style.position = 'absolute';

                            this.nextSibling.style.visibility = 'visible';

                            this.nextSibling.style.position = 'relative';

                            //定位光标

                            this.nextSibling.focus();

                        }

                    }

                };

            };

            //失去焦点事件

            var blur = function(value,type){

                return function(){

                    if(this.value === '') this.value = value;

                    if(this.value === value && type === 'password'){

                        try{

                            this.type = 'text';

                        }catch(e){

                            this.style.visibility = 'hidden';

                            this.style.position = 'absolute';

                            this.previousSibling.style.visibility = 'visible';

                            this.previousSibling.style.position = 'relative';

                        }

                    }

                };

            };

            //如果浏览器是ie8以下，则创建一个文本框与密码框切换显示

            var createInput = function(value,type,type2){

                var tmp = document.createElement('input');

                tmp.type = type;

                tmp.name = this.name;

                tmp.placeholder = value;

                tmp.value = value;

                tmp.onfocus = focus(value,type2);

                tmp.onblur = blur(value,type2);

                form.insertBefore(tmp,this);

                this.style.visibility = 'hidden';

                this.style.position = 'absolute';

            }

            for(i=0;i<inputs.length;i++){

                input = inputs[i];

                //不是文本框跳过

                if(input.type !== 'text' && input.type !== 'password') continue;

                type = 'text';

                value = input.getAttribute('placeholder');

                if(input.type === 'password'){

                    type = 'password'; //给密码框做一个标记

                    //ie8以下input type是只读的

                    try {

                        input.type = 'text';

                    }catch(e){

                        createInput.call(input,value,'text',type);

                        i++;

                    }

                }

                input.value = value;

                input.onfocus = focus(value,type);

                input.onblur = blur(value,type);

            }

        })();

    </script>

</body>

</html>

模拟placeholder支持ie8以下处理了密码框只读的问题的更多相关文章

  1. 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果

    placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...

  2. IE下支持文本框和密码框placeholder效果的JQuery插件

    基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...

  3. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  4. 关于input标签和placeholder在IE8，9下的兼容问题

    一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...

  5. jquery异步上传文件，支持IE8

    http://code.taobao.org/p/upload2/src/ 已经托管至淘宝code 源码:http://code.taobao.org/p/upload2/src/jquery.upl ...

  6. placeholder兼容IE8解决方案

    1.原因:placeholder是h5的新属性,IE10以前的浏览器(8.9)不支持此属性.   2.解决方法:jQuery三方插件  jquery-placeholder 3.快速开始: <! ...

  7. bootstarp3 支持ie8

    http://blog.csdn.net/hyb3280660/article/details/51850832 想要bootstarp3 支持ie8? 引入 <!-- 存放全局css/js - ...

  8. 获取表单的初始值，模拟placeholder属性

    input和textarea有一个默认属性defaultValue,即初始值. 即使在页面操作修改了input和textarea的内容,获取到的defaultValue依然是初始值.可通过该值模拟pl ...

  9. Bootstrap 3 支持 IE8

    Bootstrap 3 支持 IE8 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries ...

随机推荐

  1. 转如何分析解决Android ANR

    一:什么是ANR ANR:Application Not Responding,即应用无响应 二:ANR的类型 ANR定义:在Android上,如果你的应用程序有一段时间响应不够灵敏,系统会向用户显示 ...

  2. C++语言-08-命名空间

    概述 命名空间通常作为附加信息来区分不同库中相同名称的函数.类.变量.命名空间的本质是定义一个范围,该范围即为一个上下文,一个上下文中通常不允许出现相同名称的函数.类.变量. 定义 定义格式 普通的命 ...

  3. linux下使用yum安装mysql详解

    1.安装客户端和服务器端 确认mysql是否已安装: ? 1 2 yum list installed mysql* rpm -qa | grep mysql* 查看是否有安装包: ? 1 yum l ...

  4. Windows下配置Git服务器和客户端 超全

    为了配合Redmine使用,特地用Git来做版本控制. Git Candy© 是一个基于ASP.NET MVC的Git分布式版本控制平台,Git Candy的目标是轻松干掉Bonobo,逐渐追赶Git ...

  5. javascript-建造者模式

    建造者模式笔记 1.工厂模式主要是为了创建对象实例或者类簇(抽象工厂),关心的是最终产出(创建)的是什么,不关心你创建的整个过程,仅仅需要知道你最终创建的结果 2.建造者模式目的也是为了创建对象,但是 ...

  6. 关于UNPIVOT 操作符

    UNPIVOT 操作符说明 简而言之,UNPIVOT操作符就是取得一个行的数据集合,然后把每一行都转换成多个行数据.为了更好地理解,请看下图: 图1 从上图中,你能发现UNPOVOT操作符,取得了两行 ...

  7. oracle报错：ORA-00054: 资源正忙，要求指定 NOWAIT

    ORA-00054: 资源正忙, 但指定以 NOWAIT 方式获取资源: --首先得到被锁对象的session_idselect session_id from v$locked_object; -- ...

  8. 开窗函数 --over（）

    一个学习性任务:每个人有不同次数的成绩,统计出每个人的最高成绩. 这个问题应该还是相对简单,其实就用聚合函数就好了. select id,name,max(score) from Student gr ...

  9. 烂泥：linux文件同步之rsync学习（一）

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 这几天刚好有空就打算开始学习linux下的文件同步软件rsync,在学习rsync时,我们可以分以下几个步骤进行: 1. rsync是什么 2. rsy ...

  10. Linux磁盘管理之设备文件详解04

    Linux一切接文件,除了普通文件和目录文件,还包括一些其它的特殊文件:块设备文件.字符设备文件.套接字文件.链接文件等.今天这里主要说一下常见的块设备文件和字符设备文件,这2类是最常见的设备文件类. ...