-webkit文本安全:光盘;css属性在Firefox浏览器中不起作用

Question

-webkit文本安全：光盘；css属性在Firefox浏览器中不起作用

在莫齐拉还有其他选择吗。请帮助

Answer 1

更新代码：

@font-face{
font-family: text-security-disc;
src: url("https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff");
}
input {
font-family: text-security-disc;
-webkit-text-security: disc;
}

<input type="text">

---

---

注意：-如果您不希望password作为输入类型，我唯一能想到的方法就是使用类似"光盘"的字体进行输入。我不建议这样做，因为任何人都可以将密码复制粘贴到文本编辑器中并查看它。如果你想继续，这里有github存储库的链接。(我还没有测试过，所以我不确定(

Answer 2

如果您想显示占位符：

$(document).ready(function () {
$("#NewPassword").keydown(function () {            
$(this).css('font-family', 'initial');  
$(this).css('-webkit-text-security', 'unset');            
});
$("#NewPassword").on("keyup blur", function () {        
if ($(this).val().length > 0) {                
$(this).css('font-family', 'text-security-disc');
}
});
});

@font-face{
font-family: text-security-disc;
src: url("https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input id="NewPassword" maxlength="50" name="NewPassword" placeholder="password" type="text">