关于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,并添加自定义属性。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容