placeholder属性IE兼容方案

placeholder

当我们使用input标签的placeholder属性时，可以很方便的完成输入框的提示功能，在大多数主流浏览器都能完美的显示出来

不过在IE9以及更低版本的IE浏览器，这个属性就失效了，我们可以用以下两种方法来解决这个问题，首先我们看一下html示例代码

index.html

<form name="loginForm" method="post">
        <li>
            <input type="text"  name='username' placeholder="请输入内容"/>
        </li>
</form>

方法1：使用input的value属性模拟

main.js

var loginForm=document.forms[0],
    /*document.forms["loginForm"]*/
    user=loginForm.elements["username"];
user.onblur=function(){
    if(user.value=""){
        user.value="请输入内容";
    }   
};
user.onfocus=function(){
    if(user.value=""){
        user.value="请输入内容";
    }   
};

通过设置focus和blur事件，判断是否有输入值，且初始化input的value即可模拟这种效果

方法2：使用一个span标签放置在input标签之上，使用绝对定位，设置其父级元素为相对定位

这样会有一个小bug，当点击到span标签的时候，不会触发input的focus事件，这个时候我们直接给span标签添加一个click事件，自动聚焦input即可

总结:解决兼容性很烦躁，特别是IE