《完美让IE兼容input placeholder属性的jquery实现》中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同。

例如对以下文本框的解释:

<input id="itxt" class="itext" type="text" title="这是一个文本框" value="点我输入内容" tabindex="1" maxlength="20">

  

IE7:

<INPUT id=itxt class=itext title=这是一个文本框 tabIndex=1 maxLength=20 value=点我输入内容>

  

IE8:

<INPUT id=itxt class=itext title=这是一个文本框 tabIndex=1 maxLength=20 value=点我输入内容 type=text>

  

IE9:

<input id="itxt" class="itext" title="这是一个文本框" tabIndex="1" maxLength="20" value="点我输入内容" type="text">

  

对于这样不同的解释,我只想说IE去死。不过从IE9开始,似乎IE正在拼命做到不去死了,这多少让我们这些苦逼的Coder们有些欣慰。

而《完美让IE兼容input placeholder属性的jquery实现》的不完美正是因为我们的正则无法验证这些IE的不同所致。

下面给出完美的方案:

/*
* 球到西山沟
* http://www.cnzj5u.com
* 2014/11/26 12:12
*/
(function ($) {

    //判断是否支持placeholder
    function isPlaceholer() {
        var input = document.createElement("input");
        return "placeholder" in input;
    }

    var placeholderfriend = {
        focus: function (s) {
            s = $(s).hide().prev().show().focus();
        }
    }

    //不支持的代码
    if (!isPlaceholer()) {
        $(function () {
            var form = $(this);

            var elements = form.find("input[placeholder]");

            elements.each(function () {
                var s = $(this);
                var pValue = s.attr("placeholder");
                var sValue = s.val();
                if (pValue) {
                    if (sValue == "") {
                        //DOM不支持type的修改,需要复制密码框属性,生成新的DOM
                        var newinputstr = s.prop('outerHTML') || "";
                        newinputstr = newinputstr.replace(/type[" "]*=[" "]*password[" "]*/g, " type=\"text\" ")
                            .replace(/type[" "]*=[" "]*[']\s*password[" "]*['][" "]*/g, " type=\"text\" ")
                            .replace(/type[" "]*=[" "]*["\""]password[" "]*["\""]/g, " type=\"text\" ");
                        newinput = $(newinputstr);
                        newinput.attr("value", s.attr("placeholder")).css("color", "#a9a9a9").focus(function() {
                            placeholderfriendfocus(this);
                        });
                        s.hide();
                        s.after(newinput);
                    }
                }
            });

            elements.blur(function () {
                var s = $(this);
                var sValue = s.val();
                if (sValue == "") {
                    s.hide().next().show();
                }
            });

        });
    }
    window.placeholderfriendfocus = placeholderfriend.focus;
})(jQuery);

  

改进《完美让IE兼容input placeholder属性的jquery实现》的不完美的更多相关文章

  1. 完美让IE兼容input placeholder属性的jquery实现

    调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...

  2. HTML 5 <input> placeholder 属性

    原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...

  3. 兼容的placeholder属性

    作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 p ...

  4. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失

    H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...

  6. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  7. HTML <input> placeholder 属性

    css ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mo ...

  8. input placeholder属性IE、360浏览器兼容性问题

    效果:http://hovertree.com/texiao/jquery/43/ 效果二:http://hovertree.com/texiao/jquery/43/1/ 请在IE中体验. 1.创建 ...

  9. html5 <input> placeholder 属性

    带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...

随机推荐

  1. BZOJ1609: [Usaco2008 Feb]Eating Together麻烦的聚餐

    1609: [Usaco2008 Feb]Eating Together麻烦的聚餐 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 938  Solved ...

  2. 【转】SVN服务器端安装、配置与管理--不错

    原文网址:http://blog.csdn.net/qq505810824/article/details/7824929 搭建svn服务的方法步骤问题,主要有七个部分 .下面是具体的步骤介绍.   ...

  3. 常用google产品

      常用google产品 01.谷歌阅读器(Google Reader):网页版RSS阅读器,方便订阅,组织和分享新闻.有手机版. 02.谷歌相册服务(Google Picasa):提供照片的下载和编 ...

  4. net user命令

    net user net user 用户名 net user 用户名 密码 /add net user 用户名 /del net localgroup administrators net local ...

  5. A Round Peg in a Ground Hole - POJ 1584 (判断凸多边形&判断点在多边形内&判断圆在多边形内)

    题目大意:首先给一个圆的半径和圆心,然后给一个多边形的所有点(多边形按照顺时针或者逆时针给的),求,这个多边形是否是凸多边形,如果是凸多边形在判断这个圆是否在这个凸多边形内.   分析:判断凸多边形可 ...

  6. iOS10-配置获取隐私数据权限声明

    iOS10中,苹果加强了对用户隐私数据的保护,在访问以下数据的时候都需要在info.list重配置privacy,进行声明,否则程序无法正常运行. Contacts, Calendar, Remind ...

  7. vijos1055 奶牛浴场

    挺好的一道题呢 O(n^2)或者O(wh) #include<cstdio> #include<cstring> #include<cstdlib> #includ ...

  8. 【设计模式 - 7】之过滤器模式(Filter)

    1      模式简介 过滤器模式(Filter)也叫标准模式(Criteria),这种模式允许开发人员使用不同的标准来过滤一组对象,通过逻辑运算以解耦的方式把它们连接起来. 2      实例 需求 ...

  9. 自己在安装centos 系统时, 是使用英文安装 成功,现在系统语言为英语,如何设置为中文?

    作为一个linux菜鸟,遇到的问题可谓真多,在虚拟机VMware上安装好centos系统后,心里甚喜,也连上网络了. 一.遇到的问题 but,火狐浏览器浏览网页出现乱码,也不知道怎么解决?所有的中文都 ...

  10. BloomFilter--大规模数据处理利器

    Bloom Filter是由Bloom在1970年提出的一种多哈希函数映射的快速查找算法.通常应用在一些需要快速判断某个元素是否属于集合,但是并不严格要求100%正确的场合. 一. 实例 为了说明Bl ...