解決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

相關標籤/搜索