解决input标签placeholder属性浏览器兼容性问题的一种方法

时间 2019-11-21

标签解决 input 标签 placeholder 属性浏览器兼容性问题一种方法栏目浏览器繁體版

原文原文链接

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

其实，咱们能够利用label标签来模拟placeholder属性。先看例子，后解释：html

<!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属性的跨浏览器的兼容性问题。java