您的位置：首页 > 其它

input标签placeholder属性IE8及以下版本的兼容性问题

2015-11-22 13:24 676 查看

为文本框input添加文字输入提示，H5为input提供了一个placeholder属性。在支持H5的浏览器中，用此属性设置输入提示，简单方便，但是对于IE8以下版本，都不支持placeholder属性，此时必须通过另外的方式来实现输入提示。

其实，我们可以利用label标签来模拟placeholder属性。先看例子，后解释；

<html>
<head>
<script type="text/javascript">
function inputEvent(obj){
var inputTip =  document.getElementsByTagName('label')[0];
if(obj.value){
inputTip.getAttributeNode("style").value = "display:none;";
}else{
inputTip.getAttributeNode("style").value = "position:absolute;color:gray;";
}
}
function labelEvent(){
document.getElementsByTagName('input')[0].focus();
}
</script>
</head>
<body>
<div >
<label style="position:absolute;color:gray"  onclick="labelEvent()">用户名</label>
<input type="text" onkeyup="inputEvent(this)" />
</div>
</body>
</html>

看到这里估计就很清楚了，label标签本来是为input标签定义标注的，这里把label标签的样式设置为绝对定位，定位到input输入框中，然后再利用click事件和keyup事件来控制label的显示及隐藏，通过这种方式可以“屏蔽”placeholder属性的跨浏览器的兼容性问题。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航