[WEB前端]关于placeholder属性的全兼容和完美的JS插件使用方法

本文将提供在不支持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
如有疑问请留言。