ie8 placeholder兼容性解决方案

@youngwind 2016-02-27 03:22:42发表于 youngwind/blog 兼容性

问题

placeholder属性是html5的新属性,IE9及以下不支持。
2016-02-27 11 05 14

解决办法

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 = "";
}