placeholder兼容写法

　　placeholder作为html5表单新特性，提供了很多便利，它能够在表单域提示用户输入的内容，而在用户输入内容后自行消失。ie对其兼容性并不是很好，ie9以下不能兼容html5，所以对placeholder这个属性也是不支持的。实际开发过程中的页面要做到能够兼容各个浏览器尤其是ie，就要额外多写很多代码了。单单如果是文本输入框来说，placeholder很容易实现，但如果是密码框，考虑的因素就很多了。今天费了一番周折，这里针对“密码框”来分析如何实现placeholder写法。最后要兼容ie，用jq实现。
　　要实现“密码框”的placeholder需要考虑以下方面：
　　默认状态下，密码框中显示提示内容，类似于“请输入密码”。而当点击密码框，密码框内的文字消失，密码框获得焦点，用户输入内容。而当用户点击其他区域（文本框失去焦点）时，如果输入内容为空，密码框内再次显示“请输入密码”。
最后总结出三点比较关键的地方：
　　1.默认状态，也就是DOM加载完后，密码框内的文字为“请输入密码”；
　　2.当用户点击密码框，若其中的内容为“请输入密码”，则使其内容变为空；反之不做任何改变；
　　3.当“密码框”失去焦点，若其中内容为空，则还原其显示“请输入密码”；反之不做任何改变；
说的有点麻烦，举个例子。
一个form表单：
第二个输入框为输入密码框，默认状态显示“请输入密码”。
　　　　　　　　　　　　　　　　
点击输入框，内容变为空。
　　　　　　　　　　　　　　　　
a.不输入任何内容，点击页面其他区域使其失去焦点，输入框内容再次变为“请输入密码”。
　　　　　　　　　　　　　　　　
b.输入内容，点击页面其他区域使其失去焦点，输入框不发生改变。
　　　　　　　　　　　　　　　　

介绍完操作的过程，那么重点就来了，我们要写的是一个密码框，我们知道input标签的type属性决定其是密码框还是文本框，从而决定其文字显示是文字还是黑点。在两种状态之间切换是改变其type属性吗？

ie不允许改变input和button的type属性值

所以这条路走不通。不知大型网站是如何解决这个问题，在这里介绍一种不算为上上策的解决方案。对于我们要操作的输入密码添加两个input标签，type属性分别为text和password，然后在需要的时候分别显示和隐藏即可。

贴上全部代码，首先进行客户端检测，看其是否支持placeholder属性。注意我们要对能力检测而不是浏览器检测，所以不仅仅是检测浏览器是否为ie等。
为了易于理解也同时避免重复操作，这里将普通text和password区别对待，jq代码前半部分是对密码框进行的focus和blur进行监听，后半部分则是针对普通text的，也比较简单。

<input type="text" name="account" placeholder="请输入手机号" />
<input type="password" class = "password"  name="pwd" placeholder ="请输入密码" />
<input type="text" class = "text" placeholder ="请输入密码"/>

    function change(obj, alt, val) {
        obj.hide();
        alt.show();
        alt.val(val);
    }
    function placeHolder() {
    //holder获取所有文本框返回jquery对象，然后使用.each()方法对其进行遍历

        var holder = $("input[type = 'text']").not("[class = 'text']"),
            texts = $(".text"),
            passwords = $(".password"),
            note = passwords.attr("placeholder");
        change(passwords, texts, note);
        texts.on("focus",function(){
            change(texts, passwords, "");
            passwords.focus();  
        });
        passwords.on("blur",function(){
            if($(this).val() == ""){
                change(passwords, texts, note);
            }
        });
        holder.each(function () {
            var that = $(this);
            var note = that.attr("placeholder")
            that.val(note);
            that.on({
                "focus": function () {  
                    if (that.val() == note) {
                        that.val("");
                    }
                },
                "blur": function () {
                    if (that.val() == "") {
                        that.val(note);
                    }
                }
            });
        });
    };
    //能力检测
    function isPlaceHolder(){
        return "placeholder" in document.createElement("input");
    }
    if(!isPlaceHolder()){
        placeHolder();
    }