H5---input的placeholder问题

PlaceHolder的两种实现方式

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

目前浏览器的支持情况

浏览器	IE6/7/8/9	IE10+	Firefox	Chrome	Safari
是否支持	NO	YES	YES	YES	YES

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

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

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

两种方式的思路

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

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

方式一

线上示例：http://snandy.github.io/lib/ui/demo/placeholder/b.html
会用到 setCursorPosition。

方式二

线上示例：http://snandy.github.io/lib/ui/demo/placeholder/a.html

方式2 对于以下场景不适合
1. input初始隐藏
　　此时无法取到input的offset，继而无法定位span到input上面。
2. 包含input的页面dom结构发生变化
　　比如页面里删除了一些元素或添加了一些元素，导致input向上或向下偏移，而此时span则没有偏移（span相对body定位）。这比较恶心，可以考虑把span作为input的兄弟元素，即相对内层div定位（而不是body）。但这样必须强制给外层div添加position:relative，添加后可能会对页面布局产生一定影响。

相关：
http://www.w3.org/TR/2009/WD-html5-20090825/forms.html#the-placeholder-attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder