最近项目踩过的坑，不考虑ie的可以拐弯绕路走了。

css3的新属性 占位符 placeholder用着多舒服 。

偏偏万恶的ie不支持，网上有几种方法是用焦点事件代替的，不过会失去原有的特性。一旦获取焦点或者失去焦点占位符的文字就会消失。

而placeholder是在输入文字时占位符的文字才会消失

强调一点，此方法只针对 input[type='text']，其他的不支持，比如passwrod

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>Document</title>

        <script src="http://s28.9956.cn/static/v3_1/js/jquery.min.js"></script>

    </head>

    <body>

        <input type="" class="clo1" placeholder="电话">

        <script type="text/javascript">//'代码保存成一个js文件引用即可。

            $(document).ready(function() {

                var doc = document,

                inputs = doc.getElementsByTagName('input'),

                supportPlaceholder = 'placeholder' in doc.createElement('input'),

                placeholder = function(input) {

                    var text = input.getAttribute('placeholder'),

                    defaultValue = input.defaultValue;

                    if (defaultValue == '') {

                        input.value = text

                    }

                    input.onfocus = function() {

                        if (input.value === text) {

                            this.value = ''

                        }

                    };

                    input.onblur = function() {

                        if (input.value === '') {

                            this.value = text

                        }

                    }

                };

                if (!supportPlaceholder) {

                    for (var i = 0,

                    len = inputs.length; i < len; i++) {

                        var input = inputs[i],

                        text = input.getAttribute('placeholder');

                        if (input.type === 'text' && text) {

                            placeholder(input)

                        }

                    }

                }

            });

        </script>

    </body>

</html>

再列举一个支持passwrod的方法，比较猥琐，用一个label标签把input包起来，里面在加一个标签代替placeholder的文字

先做个样式，定位起来

<style type="text/css">

    label{position: relative;}

    label p{position: absolute;left: 5px;top:0px;margin:;padding:;}

</style>
<label>

    <input onfocus="$(this).siblings('p').hide();" onblur="if($(this).val()==''){$(this).siblings('p').show();}" type="password" class="psw">

    <p style="display: block;">请输入密码</p>

</label>

上面用的js方法写的，写到标签里的，大家喜欢jquery的写法的话，请看下面代码

<script type="text/javascript">

    $(".psw").focus(function(){

        $("p").hide();

    });

    $(".psw").blur(function(){

        $("p").show();

    });

</script>

兼容ie7以上的 placeholder属性的更多相关文章

  1. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  2. IE如何兼容placeholder属性

    在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下 ...

  3. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  4. HTML5表单提示placeholder属性兼容IE

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  5. 【工作笔记五】html5的placeholder属性（IE如何兼容placeholder属性）

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

  6. placeholder属性兼容ie8

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 兼容ie10以下版本的placeholder属性

    <script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...

  8. Html5的placeholder属性(IE兼容)

    HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设 ...

  9. html5 placeholder属性兼容ie11

    placeholder 属性是html5的属性,用于提供描述输入字段预期值的提示信息(hint). 简单例子: <!DOCTYPE HTML> <html> <body& ...

随机推荐

  1. 如何更改wampserver的网站根目录

    我之前把网站根目录自定义为:D:/demo,现在想改为:D:www, 过程就是打开httpd.conf文件,搜索demo,然后把demo改为www,之后更改虚拟配置文件,记住D盘下一定要有www目录 ...

  2. H3c交换机配置端口镜像详情

    端口镜像 需要将G0/0/1口的全部流量镜像到G0/0/2口,即G0/0/1为源端口,G0/0/2为目的端口. 配置步骤 1.进入配置模式:system-view: 2.创建本地镜像组:mirrori ...

  3. 关于fprint()和fwrite()

    int num = 12345; 将12345作为二进制数存储到num中 1. fprintf(fp,"%d",num); //把字符'1','2','3','4','5'的二进制 ...

  4. 如何实现Selenium自动化读取H5手机缓存

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6890675.html 前言: 由于Se ...

  5. C#：导入Excel通用类（CSV格式）

    一.引用插件LumenWorks.Framework.IO.dll(CsvReader) 插件下载地址:https://pan.baidu.com/s/1c3kTKli  提取密码 dz7j 二.定义 ...

  6. 使用guava变形数据结构

    在java日常开发中,经常需要使用各种数据结构,在涉及到数据结构之间如何优雅的转换时,我们可以借助google的guava提供的相关功能来优雅的实现.以下记录一些开发中经常需要使用数据结构的变形,以便 ...

  7. 编程岗位电话面试问答Top 50[转]

    原文链接:http://blog.jobbole.com/84618/ 1. 从哈希表,二叉树和链表中取元素的时间复杂度?如果你有数百万记录呢? 哈希表的时间复杂度为O(1),二叉树为O(logN) ...

  8. Spring整合JMS(二)——三种消息监听器

    原文地址:http://haohaoxuexi.iteye.com/blog/1893676 1.3     消息监听器MessageListener 在Spring整合JMS的应用中我们在定义消息监 ...

  9. POJ 1830 开关问题 [高斯消元XOR]

    和上两题一样 Input 输入第一行有一个数K,表示以下有K组测试数据. 每组测试数据的格式如下: 第一行 一个数N(0 < N < 29) 第二行 N个0或者1的数,表示开始时N个开关状 ...

  10. DirectSound---简易Wav播放器

    这篇文章主要给大家介绍下如何用DirectSound打造一个简易播放器,因为篇幅有限且代码逻辑较为复杂,我们只介绍下核心技术内容.该播放器主要包括以下功能: 播放.暂停 播放进度提示. 1. Dire ...