Menu
NOTICE: If you are intereseted on implementing text-security feautures, I've developed a jQuery plugin to accomplish this.
I'm using text-security to 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-security when 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-security even 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:
Can't change input type in IE8?
838
: causing or associated with a low, destitute, or demoralized state : causing someone to be or feel degraded a degrading experience … a work about a young man full of bottled rage looking for a degrading job …— Penelope Gilliatt …
The definition of degrading is something that causes damage, humiliation or a loss of respect. When someone puts you down all the time and causes you to feel humiliated and disrespected, this is an example of degrading treatment.
abase. verbdeprive of self-esteem, confidence. belittle. debase.
To demean someone is to insult them. To demean is to degrade or put down a person or thing. If you noticed the word mean in demean, that's a good clue to its meaning.
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.
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
