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

最新推荐文章于 2021-06-11 16:10:41 发布

weixin_34393428

最新推荐文章于 2021-06-11 16:10:41 发布

阅读量160

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/justyq/p/4985683.html

版权

为文本框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"  οnclick="labelEvent()">用户名</label>    
        <input type="text" οnkeyup="inputEvent(this)" />        
    </div>
</body>
</html>

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

转载于:https://www.cnblogs.com/justyq/p/4985683.html

weixin_34393428

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input标签placeholder属性IE8及以下版本的兼容性问题

为文本框input添加文字输入提示，H5为input提供了一个placeholder属性。在支持H5的浏览器中，用此属性设置输入提示，简单方便，但是对于IE8以下版本，都不支持placeholder属性，此时必须通过另外的方式来实现输入提示。其实，我们可以利用label标签来模拟placeholder属性。先看例子，后解释；<html><head> ...
复制链接

扫一扫