placeholder兼容性问题以及用label代替placeholder

什么是placeholder？

答：HTML5中的一个新属性，用于表单元素中，规定可描述输入字段预期值的简短的提示信息，也就是表单元素中的预留文本。适用于下面的 input 类型：text、search、url、tel、email 和 password，还适用于textarea元素。

---

 

placeholder有哪些兼容性问题？

答：1、placeholder在IE9及以前的浏览器中不能被支持

　　2、在chrome和Firefox中，当input框获取焦点时，placeholder的文字依然在，只有在input中输入内容之后才会消失；而在IE和Safari中，当input框获取焦点时placeholder的文字就消失了

　　3、默认情况下placeholder的文字是灰色的，当给input设置color时，在chrome和Safari中，placeholder的文字颜色不变；而在Firefox和IE中，placeholder文字的颜色会变成color的值

　　4、当希望placeholder的文字和input的输入内容在input框中都居中的时候，简单的方法就是设置text-align:center，但是在某些浏览器中（目前我发现的就是三星手机自带的浏览器），设置之后placeholder的文字依然靠左

---

 

下面对这些问题进行说明：

　　1、placeholder在IE9及以前的浏览器中不能被支持

　　我自己还不会，等我会了再补上

　　2、在chrome和Firefox中，当input框获取焦点时，placeholder的文字依然在，只有在input中输入内容之后才会消失；而在IE和Safari中，当input框获取焦点时placeholder的文字就消失了

　　这个因为没有太大影响，所以暂不考虑，要是真的希望在所有浏览器中表现一模一样，那就用我下面的label替代法吧

　　3、默认情况下placeholder的文字是灰色的，当给input设置color时，在chrome和Safari中，placeholder的文字颜色不变；而在Firefox和IE中，placeholder文字的颜色会变成color的值

　　可单独为placeholder文本设置color，给input设置颜色之后就不会影响到placeholder了

::-moz-placeholder{color:#999;}                 //Firefox
::-webkit-input-placeholder{color:#999;}      //chrome和Safari
:-ms-input-placeholder{color:#999;}            //IE10

　　4、当希望placeholder的文字和input的输入内容在input框中都居中的时候，简单的方法就是设置text-align:center，但是在某些浏览器中（目前我发现的就是三星手机自带的浏览器），设置之后placeholder的文字依然靠左

　　这里我写了一个用label代替placeholder的demo，可以解决以上所有问题，贴出代码

<div id="inputPlaceholder">
    <input type="text" value="" id="inputBox" onfocus="OnFocus()" onblur="OnBlur()"  autocomplete="off">
    <label for="inputBox" id="labelPlaceholder">请输入号码</label>
</div>

function OnFocus () {
        document.getElementById("labelPlaceholder").style.display="none";             //当input获取焦点时，label隐藏
    }
function OnBlur () {
        if (document.getElementById("inputBox").value=="") {
            document.getElementById("labelPlaceholder").style.display="block";        //当input失去焦点时，如果input框中有内容则label隐藏，如果没有内容则label显示
        } else{
            document.getElementById("labelPlaceholder").style.display="none";
        };
        
    }

#inputPlaceholder{
        width: 100%;
        height: auto;
        position: relative;
    }
#inputBox{
        width: 100%;
        height: 30px;
        line-height:30px;
        border:1px #DBEAF9 solid;
        border-radius:5px;
        background-color:#fff;
        text-align:center;
        font-size: 14px;
        padding: 0;
        margin: 0;
        color:#333;
    }
#labelPlaceholder{
        width: 100%;
        height: 32px;
        line-height: 32px;
        color:#999;
        font-size: 14px;
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        text-align:center;
    }
::-moz-placeholder{color:#999;}
::-webkit-input-placeholder{color:#999;}
:-ms-input-placeholder{color:#999;} 

　　效果图就是这样

 

　　如果有错误or不足，欢迎指正