ie8 placeholder兼容性解决方案

[youngwind]

问题

placeholder属性是html5的新属性，IE9及以下不支持。

解决办法

github上有很多placeholder的解决方案，我尝试了Placeholders.js。

使用方法

安装

bower install placeholders --save

使用

<script src="{path}/placeholders.min.js"></script>

Bug

按照作者给的上述方法，在IE8下会出现这样的bug：首次加载页面的时候可以显示placeholder，但是再次刷新的时候却不能显示了。 我在这个issue找到了解决方案。

// 在页面加载的时候运行这段代码
window.setTimeout(function() {
    Placeholders.enable();
}, 100);

Bug's Bug

后来发现使用placeholder之后引入了另一个问题：因为placeholder的实现原理是初始化的时候将placeholder值直接写进去value属性当中，所以当我取值的时候就会出现把placeholder值直接当做实际值的情况。 临时性的解决方案是直接进行数据过滤。不过这样子的代码比较繁琐，而且要是用户的姓名真的叫做“请输入用户名”呢？更好的办法有待探索。

if(data.name === "请输入用户名"){
   data.name = "";
}