注意:如果您对实现文本安全功能感兴趣，我开发了一个 jQuery plugin来完成这个。
我正在使用 text-security 来设置输入样式:
input.square-password {
-webkit-text-security: square;
}
在不支持 text-security 的网络浏览器中，仅显示密码(无星号 (****))。
我期待在不支持它们的浏览器上降低此功能，方法是在可用时使用 text-security 或使用标准星号。
输入的 HTML 是:
<input class="square-password textbox" name="paymentpassword" />
我尝试添加一个 type="password" 属性:
<input type="password" class="square-password textbox" name="paymentpassword" />
但即使在支持它的浏览器上，它也会覆盖 text-security。
有什么解决方法吗？是否可以通过 CSS (no type="password") 为输入设置星号？
编辑:text-security 似乎只有 webkit 支持。
编辑 2: 设置为 type="password" 的输入无法使用文本安全设置样式。甚至没有 !important(type="email"有)
编辑 3: @ryan 回答适用于:
- 火狐
- Chrome
- 歌剧
最佳答案
这是非常快速和肮脏的，但它有效。
<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.
关于html - 降级-webkit-text-security，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13822548/