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

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

Answer 3

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

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

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

对于输入（在我的例子中为 MUI TextField），我将 type 设置为 "text" 而不是“password”，以便绕过 Chromes 检测存储凭证功能。我将 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)

}

-webkit-text-security兼容性

3 个答案: