html – 降级-webkit-text-security

发布时间：2020-12-14 16:37:48 所属栏目：资源来源：网络整理

导读：注意：如果您正在实施文本安全功能,我已经开发了一个 jQuery plugin来完成此任务. 我正在使用文本安全来设置输入样式： input.square-password { -webkit-text-security: square; } 在不支持文本安全性的Web浏览器中,只显示密码(没有星号(****)). 我期待在不

注意：如果您正在实施文本安全功能,我已经开发了一个 jQuery plugin来完成此任务.

我正在使用文本安全来设置输入样式：

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

在不支持文本安全性的Web浏览器中,只显示密码(没有星号(****)).

我期待在不支持它们的浏览器上降级此功能,在可用时使用文本安全性或使用标准星号.

输入HTML是：

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

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

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

但它甚至会在支持它的浏览器上覆盖文本安全性.

有任何变通方法吗？是否可以通过CSS(无类型=“密码”)将输入的星号设置为输入？

编辑：文本安全似乎只有webkit支持.

编辑2：设置为type =“password”的输入无法使用text-security设置样式.甚至没有！important(type =“email”)

编辑3：@ryan答案工作正常：

> Firefox
> Chrome
>歌剧

Can’t change input type in IE8?

解决方法

这很快又脏,但它确实有效.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!