zoukankan      html  css  js  c++  java
  • 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框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属性的跨浏览器的兼容性问题。

  • 相关阅读:
    C# 如何得到局域网中的计算机名?
    设计模式之Factory(转帖)[学习用]
    byte类型特殊的地方
    原码、反码和补码
    由Public key生成Public key token
    .Net位运算符&,|,!,^,<<,>>
    强命名程序集,签名,延迟签名
    把16进制字符转换成byte数组
    SHA1哈希算法
    .NET工具篇(四)—SN.EXE
  • 原文地址:https://www.cnblogs.com/adtxgc/p/4591741.html
Copyright © 2011-2022 走看看