Input输入字体颜色改变js（兼容IE）

从网上找的代码，自己封装了一下（前提：引用jQuery库）

方法1：

HTML：

 <div class="box">
    <div  class="ipt1" ><input type="text" id="user" value="name" ></div>
    <div  class="ipt2" ><input type="text" id="tel" value="phone"></div>
    <input type="submit" class="submit" value="确   认">
</div>

javascript:

 function InputStyleChange(id,p,c1,c2){
 //函数
             var placeholder = p;
             var inputname = id;
            inputname.onfocus = function(){
                if ( this.value == placeholder ) {
                     this.value = '';
                    this.style.color = c1;
               }
             };
            inputname.onblur = function(){
                if (!this.value) {
                     this.value = placeholder;
                     this.style.color = c2;
                 }
            };

            if (inputname.value == placeholder) {
                inputname.style.color = c2;
             }
        }

 $(function){
 InputStyleChange($('#tel')[0],'phone','#323232','#b4b4b4');
//调用函数
 //修改默认显示文字需要与Html表单默认文字对应
 })

结语：经过测试火狐浏览器兼容存在问题。

 方法2：

html

<label>
    <input type="text" class="ipt pws"/></input>
    <span class="ph-label">密码</span>
</label>    

css

label{

    display: block;
    position: relative;

}

.ph-label{
    position: absolute;
    top: 0px;
    line-height: 52px;
    left: 1em;
    font-size: 12px;
    color: #a1a1a1
}

js

function InputStyleChange(inputs){
        inputs.each(function(i,e){
            $(e)[0].value="";//清空表单
            $(e).bind("focus",function(){
                $(e).siblings(".ph-label").hide();
            }).bind("blur",function(){
                if (!$(e).val()) $(e).siblings(".ph-label").show();
            }).siblings(".ph-label").click(function(element){
                $(element.target).hide();
                $(e).focus();
            })
        })
    }

InputStyleChange($('.ipt'));//调用函数