placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

<input type="text" name="loginName" placeholder="邮箱/手机号/QQ号">

目前浏览器的支持情况

然而，虽然IE10+支持placeholder属性，它的表现与其它浏览器也不一致

• IE10+里鼠标点击时（获取焦点）placeholder文本消失
• Firefox/Chrome/Safari点击不消失，而是键盘输入时文本消失

这相当恶心，如果使用了placeholder属性。产品经理还是不依不饶，会讲为什么IE里是点击的时候提示文本消失，Chrome里却是键盘输入的时候提示文本消失。要求前端工程师改成一样的表现形式。鉴于此，以下两种实现方式均不采用原生的placeholder属性。

两种方式的思路

1. (方式一)使用input的value作为显示文本
2. (方式二)不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面

两种方式各有优缺点，方式一占用了input的value属性，表单提交时需要额外做一些判断工作，方式二则使用了额外的标签。

PS：另附一个网友的解决思路

如果是支持的浏览器，那么直接不管。如果是不支持的，再直接读取元素的placeholder值做兼容处理。这样的话能实现浏览器的一致性，同时使用成本非常低。只需要在元素上书写placeholder标签，然后在domReady之后 $(‘body’).placeholder();

转自：cnblogs