-webkit-text-security兼容性

Question

我已text-security:disc;按以下方式设置但它在firefox中不起作用.

text-security:disc;
-webkit-text-security:disc;
-mox-text-security:disc;

我将这些属性设置为input[type='number']字段.有什么建议吗？

Answer 1

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");
    }
}

CSS

input {
    text-security: disc;
    -webkit-text-security: disc;
    -moz-text-security: disc;
}

Answer 2

It 2022 和 Firefox 仍然不支持文本安全

将输入类型更改为密码的答案会产生一些不良影响：

• 浏览器密码建议和保存密码提示
• 默认输入行为丢失 - 例如，当使用 type=number 时，将在移动设备上显示密码键盘。

这个问题有几个新的解决方案：

1 - 输入模式

<input type="password" inputmode="tel" />

这看起来像密码，但行为却像电话。似乎显示移动密码键盘，但仍想在 Firefox 中保存密码。也许这就是你想要的？

除了适用于 MacOS 的 IE 和 Safari 之外，Inputmode 具有良好的浏览器覆盖率

https://caniuse.com/input-inputmode

2 - 自定义字体来屏蔽文本

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/noppa/text-security/master/dist/text-security.css">
<style>
    input.password-mask {
        font-family: "text-security-disc";
        -webkit-text-security: disc;
    }
</style>
<input type="tel" class="password-mask" />

此解决方案的优点是更广泛的浏览器覆盖 Safari 和 IE11，但安全性可能较低，因为不会使用 type=password 的浏览器安全功能。

Git 存储库 - https://github.com/noppa/text-security

演示 - https://noppa.github.io/text-security.html