Question

注意：如果您在实施文本安全功能方面有所动作，我已经开发了jQuery plugin来完成此任务。

我正在使用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（无类型=“密码”）将输入的星号设置为输入？

编辑：文字安全似乎只支持webkit。

设置为type="password"的

编辑2：输入无法使用text-security设置样式。甚至没有使用!important（type =“email”）

编辑3： @ryan答案正常：

火狐
铬
戏

Can't change input type in IE8?

Answer 1

这很快又脏，但确实有效。

<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 here.

降级-webkit-text-security

1 个答案: