调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案。

/*
* 球到西山沟
* 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 (i) {
                var s = $(this);
                var pValue = s.attr("placeholder");
                var sValue = s.val();
                if (pValue) {
                    if (sValue == "") {
                        //DOM不支持type的修改,需要复制密码框属性,生成新的DOM
                        var html = this.outerHTML || "";
                        html = html
                            .replace(/\s*type=(['"])?password\1/gi, " type=\"text\" ")
                            .replace(/\s*value=(['"])?\S*\1?/gi, " value=\"" + pValue + "\" onfocus=\"phfrfocus(this);\" style=\"color:#a9a9a9;\" ");
                        s.hide();
                        s.after(html);
                    }
                }
            });

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

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

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

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

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

  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. vijosP1902学姐的清晨问候

    题目:https://vijos.org/p/1902 题解:sb题...扫一遍每个字母出现的次数即可 代码: #include<cstdio> #include<cstdlib&g ...

  2. Scala:(2)控制结构

    (1)if else val s=) else -1 (2)循环 ){ r=r*n n-= } ///for 循环 to n) r=r*i //until val s="Hello" ...

  3. C#验证码

    using System; using System.Drawing; using System.Drawing.Drawing2D; using System.Drawing.Imaging; us ...

  4. Performance testing of web application

    Testing the performance of web application is easy . It's easy to design unrealistic scenario . Easy ...

  5. 这次GDC China 2015的总结与关卡设计教程的梳理

    去年关卡教程总结链接:听了GDC2014关于关卡设计的讲座的总结与自己的理解 24 号去了GDC china听了讲座,没有听unity没有听VR,听了一天关卡教程,和上次的关卡教程还是有区别的,这次的 ...

  6. 苹果Think Different广告

    电视广告版: Here’s to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the s ...

  7. 容斥原理应用(求1~r中有多少个数与n互素)

    问题:求1~r中有多少个数与n互素. 对于这个问题由容斥原理,我们有3种写法,其实效率差不多.分别是:dfs,队列数组,位运算. 先说说位运算吧: 用二进制1,0来表示第几个素因子是否被用到,如m=3 ...

  8. conv2用法

    1.用法 C=conv2(A,B,shape);        %卷积滤波 A:输入图像,B:卷积核      假设输入图像A大小为ma x na,卷积核B大小为mb x nb,则      当sha ...

  9. SQL 存储过程 通过多个ID更新数据 分类: SQL Server 2014-12-08 16:08 299人阅读 评论(0) 收藏

    下面举个例子说明: 我想让一部分品牌的名称(即Brand_Name)后面加上1,Brand_ID是主键,sql语句很容易实现,但是存储过程如何写呢? 错误写法如下: //*************** ...

  10. Java keyword具体解释

    訪问控制修饰符号 1)        private 私有的 private keyword是訪问控制修饰符,能够应用于类.方法或字段(在类中声明的变量). 仅仅能在声明 private(内部)类.方 ...