<!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. 【代码笔记】iOS-点击出现选择框

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  2. iOS开发之多线程技术——NSOperation篇

    本篇将从四个方面对iOS开发中使用到的NSOperation技术进行讲解: 一.什么是NSOperation 二.我们为什么使用NSOperation 三.在实际开发中如何使用NSOperation ...

  3. Getting Started with ASP.NET Web API 2 (C#)

    By Mike Wasson|last updated May 28, 2015 7556 of 8454 people found this helpful Print   Download Com ...

  4. 定做属于自己的Lodop安装程序

    WEB控件Lodop自发布以来,受到广大开发人员的喜爱,从如下博文分析看看: http://blog.sina.com.cn/s/blog_721e77e501011nyb.html 无论是好评率还是 ...

  5. WPF学习之路（十二）控件（Range控件）

    ProgressBar 进度条,主要属性:Minimum\Maximun\Value, IsIndeterminate为True时,进度条会循环运转 <Grid> <Grid.Row ...

  6. python 打印对象的所有属性值

    def prn_obj(obj): print '\n'.join(['%s:%s' % item for item in obj.__dict__.items()])

  7. 操作linux命令

    一.Linux下重启Tomcat 1. 进入tomcat下的bin目录:cd /user/standard/tomcat/bin; 使用关闭命令:./shutdown.sh; 查看Java进程是否关闭 ...

  8. java的finalize()函数

    在说明finalize()的用法之前要树立有关于java垃圾回收器几个观点: "对象可以不被垃圾回收" : java的垃圾回收遵循一个特点, 就是能不回收就不会回收.只要程序的内存 ...

  9. SQL Server调优系列玩转篇（如何利用查询提示（Hint）引导语句运行）

    前言 前面几篇我们分析了关于SQL Server关于性能调优的一系列内容,我把它分为两个模块. 第一个模块注重基础内容的掌握,共分7篇文章完成,内容涵盖一系列基础运算算法,详细分析了如何查看执行计划. ...

  10. Xcode同时兼容Xcode7和Xcode8，两个版本并存，也适用于先升8再安装7

    先吐槽一下之前看到的一个教程,如下: 先在应用程序内,拷贝一份之前的xcode,然后再安装新版本,发现这种安装完成就是在之前上面迭代了  有木有?等于没任何作用 我这边就是不小心先升级了8,然后再安装 ...