9

注意：如果您对实现文本安全功能感兴趣，我开发了一个jQuery 插件来完成此操作。

我正在使用text-security样式输入：

input.square-password {
  -webkit-text-security: square;     
}

在不支持的网络浏览器中，text-security仅显示密码（无星号 (****)）。

我期待通过使用text-security何时可用或使用标准星号来降低不支持它们的浏览器上的此功能。

输入的 HTML 是：

<input class="square-password textbox" name="paymentpassword" />

我尝试添加一个type="password"attr：

<input type="password" class="square-password textbox" name="paymentpassword" />

但text-security即使在支持它的浏览器上，它也会覆盖。

任何解决方法？是否可以通过CSS(no type="password") 为输入设置星号？

编辑： text-security 似乎只受 webkit 支持。

编辑 2：设置为type="password"无法使用文本安全设置样式的输入。甚至没有!important(type="email" 确实)

编辑 3： @ryan 答案适用于：

  • 火狐
  • 铬合金
  • 歌剧

无法更改 IE8 中的输入类型？

4

1 回答 1

10

这非常快速和肮脏，但它有效。 

<html>
<head>
    <style>
        input{
            -webkit-text-security:square; 
            text-security:square;
        }       
    </style>

    <script>
        window.onload = function(){
            init(); 
        }
        function init(){
            var x = document.getElementsByTagName("input")[0];
            var style = window.getComputedStyle(x);
            console.log(style);
            if(style.webkitTextSecurity){
                //do nothing
            }else{
                x.setAttribute("type","password");
            }
        }           
    </script>
</head>
<body>
    <div id="di">
        <input/>        
    </div>
</body>

在 chrome 和 firefox 中测试，我在 linux 上，所以我无法在 IE 中测试。 Jsfiddle在这里。

于 2012-12-11T15:41:34.143 回答