<!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开发学习——搭建开发环境

    在学校开课学习了android的一些简单的UI组件,布局,四大组件学习了2个,数据存储及网络通信,都是一些简单的概念,入门而已.许多东西需要自己去学习. 学习一下 Android开发环境的搭建,两种方 ...

  2. VSS、RSS、PSS、USS

    VSS:Virtual Set Size,虚拟耗用内存.它是一个进程能访问的所有内存空间地址的大小.这个大小包含了一些没有驻留在RAM中的内存,就像mallocs已经被分配,但还没有写入.VSS很少用 ...

  3. <转>最新版SDWebImage的使用

    我之前写过一篇博客,介绍缓存处理的三种方式,其中最难,最麻烦,最占内存资源的还是图片缓存,最近做的项目有大量的图片处理,还是采用了SDWebImage来处理,但是发现之前封装好的代码报错了.研究发现, ...

  4. Java Collection Framework概述

    文章出自:听云博客 Collection概述 Java collection是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等. Java集合主要可以划分为4个部分:Li ...

  5. 8、需求分析师要阅读的书籍 - IT软件人员书籍系列文章

    需求分析是软件项目开始阶段重要的一步.而需求分析是项目经理或产品经理需要经历的一环,所以说需求分析是项目经理或产品经理需要具备的知识.但是,项目角色中却分离出了需求分析师这个角色,也就是说,在大型的或 ...

  6. JAVA中的枚举小结

    枚举 将一组有限集合创建为一种新的类型,集合里面的值可以作为程序组件使用: 枚举基本特性 以下代码是枚举的简单使用: 使用values方法返回enum实例的数组 使用ordinal方法返回每个enum ...

  7. MVC数据验证原理及自定义ModelValidatorProvider实现无编译修改验证规则和错误信息

    Asp.net MVC中的提供非常简单易用的数据验证解决方案. 通过System.ComponentModel.DataAnnotations提供的很多的验证规则(Required, StringLe ...

  8. Symantec Backup Exec备份作业服务器盘符变更

    Symantec Backup Exec的备份作业中,如果某个服务器的磁盘更改了盘符,如果不修改备份作业里面的相关配置,就会出现类似下面的错误信息,如下截图所示 因为这台服务器上我们将原先的G盘的盘符 ...

  9. Javascript之旅——第六站：看看writable特性

    说起js中的那些特性标记,总觉得有些怪怪的,那为什么要说到这个attribute,起源于对一个问题的疑问,我们都知道window对象其实就是 浏览器窗口的一个实例,既然是一个实例,那这个实例就应该有“ ...

  10. php中文乱码问题

    HTML中文乱码问题的解决方法. 比如有个index.html的页面(这里是指真正的静态页面,修改服务器的……伪静态的请看方案B) 1.在head标签里面加入这句 <head> <m ...