《完美让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. 微软开放技术发布开源的微软云服务器底盘管理器 (Chasis Manager) 软件

     发布于 2014-07-14 作者 陈 忠岳 今天,微软公司加入开放计算项目(OCP),贡献出硬件和软件规范,管理 API 和协议,机械 CAD 模型,以及电路板文件和 Gerbers(描述印刷 ...

  2. 网络流(最大流):CodeForces 499E Array and Operations

    You have written on a piece of paper an array of n positive integers a[1], a[2], ..., a[n] and m goo ...

  3. 把测试app打包成ipa文件

    我终于把我的程序放到我的touch上了,其实把app放到touch上还有很多办法,这篇教程是主要讲怎么把app注册了,然后打包成一个ipa文件的. 先上官方文档:https://developer.a ...

  4. Telephone directory - SGU 127(水)

    题目大意:有一个电话簿,每页最多纪录K行电话,现在有N个电话要记录在电话薄上,要求同页的电话号码的首位要相同,电话簿的前两页是纪录的别的东西,问最少需要多少页电话簿. 分析:直接求首位数字有多少个即可 ...

  5. wikioi 1154 能量项链 (2006年NOIP全国联赛提高组)

    题目描述 Description 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子 ...

  6. SSH服务及花生壳域名解析

    一.安装说明以CentOS 5为例 1.安装必要的开发包 [root@localhost ~]# yum install gcc gcc-c++ autoconf automake 2.下载phddn ...

  7. ecshop获取客户端操作系统

    <?php /** * 获得客户端的操作系统 * * @access private * @return void */ function get_os() { if (empty($_SERV ...

  8. ELK初学搭建(logstash)

    ELK初学搭建(logstash) elasticsearch logstash kibana ELK初学搭建 logstash 1.环境准备 centos6.8_64 mini IP:192.168 ...

  9. java链接mysql

    比喻不是很合适,但能凑合用 解释 javaweb链接数据步骤 加载JDBC驱动 Class.forName("com.mysql.jdbc.Driver);//加载JDBC驱动 提供链接数据 ...

  10. StrutsPrepareAndExecuteFilter(转)

    http://www.iteye.com/topic/829843  一.概述 Struts2的核心是一个Filter,Action可以脱离web容器,那么是什么让http请求和action关联在一起 ...