<!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. VSS提示"Could not find the Visual SourceSafe Internet Web Service connection information for the specified database

    转自:http://www.cnblogs.com/qqflying/archive/2007/12/18/1004051.html VSS连接错误提示: ====================== ...

  2. MySQL 常见的sql命令

    注意事项: 1.sql 使用单引号来环绕文本值(大部分数据库系统也接受双引号).如果是数值,请不要使用引号. 一.数据库 1.创建数据库 CREATE DATABASE lesson ; 创建一个名字 ...

  3. Android网络请求框架

    本篇主要介绍一下Android中经常用到的网络请求框架: 客户端网络请求,就是客户端发起网络请求,经过网络框架的特殊处理,让后将请求发送的服务器,服务器根据 请求的参数,返回客户端需要的数据,经过网络 ...

  4. 实战CENTOS6.5安装docker并创建asp.net mvc 5 镜像，运行MVC 网站

    Docker,容器,让研发.测试.生产同一环境,可在linux平台上混合使用JAVA与net 程序 Centos6.5安装docker 参考http://my.oschina.net/kcw/blog ...

  5. 表格table嵌套，边框合并问题

    [问题] 外层table与内层table嵌套,内外表格都需边框时,设置“border=1”,但边框会重复,造成某些地方边框粗,有些地方边框细的问题.   [解决办法]: 外表格样式: <tabl ...

  6. PMBOK(第五版)学习笔记二－十大知识领域(P87)

    五大项目管理过程组:启动.规划.执行.监控.收尾过程组 十大知识领域是:项目整合管理.项目范围管理.项目时间管理.项目成本管理.项目质量管理.项目人力资源管理.项目沟通管理.项目风险管理.项目采购管理 ...

  7. [20140711] SQL Server page还原

    create DATABASE T --数据库不能是简单模式 go USE t GO )) GO INSERT INTO dbo.t ( value ) VALUES ( ) ) BACKUP DAT ...

  8. Spring,hibernate,struts的面试笔试题及答案

    Hibernate工作原理及为什么要用?  原理:  1.读取并解析配置文件  2.读取并解析映射信息,创建SessionFactory  3.打开Sesssion  4.创建事务Transation ...

  9. MongoDB学习笔记——Replica Set副本集

    副本集 可以将MongoDB中的副本集看作一组服务器集群由一个主节点和多个副本节点等组成,相对于之前讲到的主从复制提供了故障自动转移的功能 副本集实现数据同步的方式依赖于local数据库中的oplog ...

  10. java 生成和解析二维码

    public class QRCode { /** * 解析二维码(QRCode) * @param imgPath * @return */ public static String decoder ...