本文将提供在不支持placeholder属性的浏览器,全面模拟兼容该属性的JS代码,该JS插件源码为原创,如下载使用,请保留版权信息。
该插件支持对input、textarea两种标签进行placeholder兼容,支持颜色自定义,并根据标签样式自动读取字体大小、水平对齐方式、内外边距等。插件由原生JS编写,无需任何其他插件支持,并且使用简单,只需一行JS调用即可。
支持的网页效果
不支持的网页效果
本插件使用方法:
使用方法一:
$placeholder.init();
使用方法二:
$placeholder.init(true,true);
使用方法三:
$placeholder.init({all:true,color:true});
参数描述:
第一个参数(all):默认false
- true-无论浏览器是否支持,都显示兼容标签
- false-仅在浏览器不支持时显示兼容标签
第二个参数(color):默认false
- true-根据设置的input或者textarea的css属性color改变placeholder颜色
- false-在显示兼容时,强制placeholder颜色为#ccc
另外,在获取到焦点时,placeholder显示不会隐藏,仅在存在文字输入时,才会隐藏。
下载地址:h.placeholder.min.js 资源
Github地址:https://github.com/hceny-architect/web-js-tools
如有疑问请留言。