-webkit-文本安全兼容性答案

【问题标题】：-webkit-text-security compatibility-webkit-文本安全兼容性
【发布时间】：2022-02-17 07:03:13
【问题描述】：

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

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

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

【问题讨论】：

你用的是什么版本？？检查此浏览器支持browsersupport.net/CSS/-webkit-text-security
是否有任何替代方案可以在任何地方使用？
给你。在 Firefox 32.0.1 中测试 jsfiddle.net/Ldr07h2r/6
这不起作用的唯一原因是你打错了。这是moz，不是mox
不。它不起作用，因为它已被弃用。

标签： css

【解决方案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;
}

【讨论】：

x.setAttribute("type", "password"); 是否破坏了 OP 的 input[type='number'] 设置？
不会触发手机小键盘
这只会是 Firefox 的问题

【解决方案2】：

Firefox、IE 不支持 -webkit-text-security 属性。更多详情，您可以访问此链接：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

【讨论】：

【解决方案3】：

我正在使用 React 制作 PWA。（并且在有问题的组件上使用 Material-UI 和 Formik，所以语法可能看起来有点不寻常......）

我对 OP 的目标并不完全清楚......但它似乎与我的需求相似：我正在使用“光盘”并且还需要一个“数字”键盘。

我想阻止 Chrome 尝试保存登录凭据（因为在我的情况下，设备与许多用户共享）。

对于输入（在我的例子中是 MUI TextField），我将 type 设置为 "text" 而不是 "password"，以便绕过 Chrome 检测存储凭证功能。我将 input-mode 设为 "numeric" 以使小键盘作为键盘弹出。然后，正如 Richa 所述，我使用 text-security: disc; 和 -webkit-text-security: disc;
再次注意我的代码语法，因为它使用 React、MUI 等（React 使用大写字母，没有破折号等）

查看带有 // 注释的部分；其余的只是上下文的奖励。

<TextField
            type="text" // this is a hack so Chrome does not offer saved credentials; should be "password" otherwise
            name="pincode"
            placeholder="pin"
            value={values[PIN_FIELD]}
            onChange={handleChange}
            onBlur={handleBlur}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <RemoveRedEye
                    color="action"
                    onClick={togglePasswordMask}
                  />
                </InputAdornment>
              ),
              inputProps: {
                inputMode: 'numeric', // for number keyboard
                style: {
                  textSecurity: `${passwordIsMasked ? 'disc' : ''} `, // part of hack described above. this disc mimics the password *** appearance
                  WebkitTextSecurity: `${passwordIsMasked ? 'disc' : ''} `, // same hack
                },
              },
            }}
          />

如您所见，我有一个开关，可让您隐藏或显示图钉（通过单击眼睛图标）。可以根据需要添加类似的功能。

const [passwordIsMasked, setPasswordIsMasked] = useState(true)
const togglePasswordMask = () => {
setPasswordIsMasked((value) => !value)

}

【讨论】：

【解决方案4】：

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

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

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

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

1 - 输入模式

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

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

Inputmode 具有良好的浏览器覆盖率，但 IE 和 MacOS 的 Safari 除外

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

【讨论】：