为文本框input添加文字输入提示,H5为input提供了一个placeholder属性。在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属性,此时必须通过另外的方式来实现输入提示。
其实,我们可以利用label标签来模拟placeholder属性。先看例子,后解释:
<!DOCTYPE html> <html> <head> <script type="text/javascript"> function inputEvent(obj){ if(obj.value){ document.getElementsByTagName('label')[0].style.visibility = "hidden"; }else{ document.getElementsByTagName('label')[0].style.visibility = "visible"; } } function labelEvent(){ document.getElementsByTagName('input')[0].focus(); } </script> </head> <body> <div> <label style="position:absolute;color:gray;" onclick="labelEvent()">User Name</label> <input type="text" onkeyup="inputEvent(this)" /> </div> </body> </html>
看到这里估计就很清楚了,label标签本来是为input标签定义标注的,这里把label标签的样式设置为绝对定位,定位到input输入框中,然后再利用click事件和keyup事件来控制label的显示及隐藏,通过这种方式可以“屏蔽”placeholder属性的跨浏览器的兼容性问题。