<!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布局优化策略

    我们要知道布局是否合理,可以通过Hierarchy Viewer这个工具.打开Hierarchy Viewer(定位到tools/目录下,直接执行hierarchyviewer的命令,选定需要查看的P ...

  2. DirectX标准规定 DirectX和OpenGL的不同

    DirectX标准规定 DirectX使用左手坐标系. X轴正向指向右,Y轴正向指向上,Z轴正向垂直纸面向内. 编写Direct3D应用程序时,通常只使用4×4的矩阵和1×4的行向量,相乘时行向量在前 ...

  3. 【代码笔记】iOS-后台运行，可以选择在前台或后台或前后台

    一,工程图. 二,代码. AppDelegate.h AppDelegate.m RootViewController.h #import <UIKit/UIKit.h> @interfa ...

  4. [Android] android .keystore文件转x509pem工具

    .keystore是android的签名文件,最近在做联通联运的时候,发现他们需要上传x509pem格式的文件来签名所以就研究了一下如何转化 方法一:使用openssl的方法 http://blog. ...

  5. 不同servlet版本的web.xml的头部信息

    servlet2.5 <?xml version="1.0" encoding="UTF-8"?> <web-app version=&quo ...

  6. Azure File

    Azure File 服务使用标准 SMB 2.1 协议提供文件共享.Azure 中运行的应用程序现在可以使用熟悉的标准文件系统 API(如 ReadFile 和 WriteFile)在虚拟机之间轻松 ...

  7. Oracle BIEE启停脚本

    作为BI的开发人员,经常启停BI服务在所难免,启动的过程又比较长,命令需要不同目录切换,简直烦死人呢, 特意整理了linux中的启动脚本,将以下脚本存成biee.sh,后面的过程就相当简单了, 启动: ...

  8. Sql Server之旅——第一站 那些给我们带来福利的系统视图

    本来想这个系列写点什么好呢,后来想想大家作为程序员,用的最多的莫过于数据库了,但是事实上很多像我这样工作在一线的码农,对sql 都一知半解,别谈优化和对数据库底层的认识了,我也是这样... 一:那些系 ...

  9. win8.1 user profile service 服务登录失败

    在Win 8.1 上新建个用户后,不能登录. 出现 user profile service 服务登录失败. 无法加载用户配置文件. 网上大部分相同提示的问题是有关已有账号不能再次登陆的. 解决方式是 ...

  10. mysql截取longblob类型字段内一小块数据的方法

    由于longblob类型的字段内容一般都好大,最大限制是4G,所以在数据查询中读取一整块数据的方式是不现实的,这需要要截取的方法来获取需要的数据. 方法如下: hex(substring(A, ind ...