降级-webkit文本安全 [英] Degrading -webkit-text-security
问题描述
注意：如果您在实施文本安全性功能时感到厌烦，我已经开发了一个 jQuery插件来完成此操作。
我使用 text-security 到样式输入：
input.square-password {
-webkit-text-security：square;
}
在不支持 text-security ，只显示密码（无星号（ * *））。
通过在可用或使用标准星号时使用 text-security 的浏览器上的功能。
输入HTML是：
< input class =square-password textboxname =paymentpassword/&
我尝试添加 type =password attr：
< input type =passwordclass =square-password textboxname =paymentpassword/> ;
但它会覆盖 text-security 支持它的浏览器。
任何解决方法？是否可以通过 CSS （no type =password）将输入设置为星号？
EDIT：的输入设置为 type =password无法使用文本安全性设置样式。即使使用！important （type =email）
编辑3： @ryan answer works on：
- Firefox
- Chrome
- Opera
p>这是相当快速和脏，但它的工作原理。
< 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>
我在linux，所以我不能在IE测试。 Jsfiddle此处
NOTICE: If you are intereseted on implementing text-security feautures, I've developed a jQuery plugin to accomplish this.
I'm using
text-securityto style inputs:input.square-password { -webkit-text-security: square; }In web browsers that dont support
text-security, password is just shown (no asterisks (**)).I'm looking forward to degrade this functionality on browser that don't support them, by using
text-securitywhen is available or using standard asterisks.The input HTML is:
<input class="square-password textbox" name="paymentpassword" />I tried adding a
type="password"attr:<input type="password" class="square-password textbox" name="paymentpassword" />But it overwrites
text-securityeven on browsers that do support it.Any workarounds? Is it posible to set asterisks to the input via
CSS(no type="password")?EDIT: text-security seems only supported by webkit.
EDIT 2: inputs setted as
type="password"can't be styled with text-security. Not even with!important(type="email" does)EDIT 3: @ryan answer works fine on:
- Firefox
- Chrome
- Opera
Can't change input type in IE8?
This was pretty quick and dirty but it works.
<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>
Tested in chrome and firefox, I'm on linux so I can't test in IE. Jsfiddle here.
这篇关于降级-webkit文本安全的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
