9

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:

  • Firefox
  • Chrome
  • Opera

Can't change input type in IE8?

Community
  • 1
  • 1
jviotti
  • 17,881
  • 26
  • 89
  • 148
  • Does any browser other than webkit currently support this at all? Can't find anything about it except for the `-webkit` variant... – deceze Dec 11 '12 at 15:22
  • @deceze It seems only webkit supports it. I'm fixing this code, it's not mine. – jviotti Dec 11 '12 at 15:26
  • @ryan Sure, any solution or suggestion will be welcomed – jviotti Dec 11 '12 at 15:26
  • So weird that it doesn't work on `type="password"`, I wonder what this is even supposed to be used for if not password-type inputs? Degrading to plain text inputs is terrible. – Wesley Murch Dec 11 '12 at 16:04
  • @WesleyMurch It's a nice feature, but it seems is not mature enought, yet – jviotti Dec 11 '12 at 16:11

1 Answers1

10

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.

Ryan
  • 5,644
  • 3
  • 38
  • 66