关于placeholder不得不说的一些坑

大家对于placeholder都不陌生，HTML5新增的属性，输入框为空时显示一些提示信息，输入框得焦时，这些提示信息自动消失，一个非常好用的属性。但是，不可避免的又有一些不得不说的坑。

说这些坑之前，先来一个方法，判断浏览器是否支持placeholder

function supportPlaceholder(){

    var input = document.createElement('input');

    retur ('placeholder' in input);

}

支持的话返回true，不支持返回false。

坑一：Safari中，输入内容时，placeholder不会自动消失，只能手动强制清空。

坑二：在各个浏览器中样式不一致，需要初始化

input::webkit-input-placeholder{color: #999;}

input:moz-placeholder{color: #999;}//Firefox4-18

input::moz-placeholder{color: #999;}//Firefox19+

input:ms-input-placeholder{color: #999}//IE10+

切记：IE是一个:

坑三：在IE10中，placeholder会触发input的focus事件

这个坑直接导致我忍痛放弃placeholder，直接用span标签模拟placeholder，在focus时隐藏span标签就可以了。

或者也可以用自定义属性模拟placeholder效果，focus时判断一下input的value值是否等于默认值，如果等于时就清空该属性。blur时，判断value值是否为空，或者值等于默认值，如果这两个判断有一个为真，就把默认值赋给value，并添加自定义属性。