降级-webkit-text-security

小编典典

降级-webkit-text-security

css

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

我text-security用来设置输入的样式：

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

在不支持的Web浏览器中，text-security仅显示密码（没有星号（****））。

我希望通过使用text-securitywhen可用或使用标准星号来降低不支持它们的浏览器上的此功能。

输入的HTML是：

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

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

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

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

任何解决方法？是否可以通过CSS（无type =“ password”）为输入设置星号？

编辑： 文本安全性似乎仅受Webkit支持。

编辑2： 设置为type="password"不能使用文本安全设置样式的输入。甚至没有!important（type =“
email”可以）

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

Firefox
Chrome
Opera

阅读 1968

2020-05-16

共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在这里。

2020-05-16