html - Degrading -webkit-text-security

Question

Welcome To Ask or Share your Answers For Others

html - Degrading -webkit-text-security

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

333 views

1 Answer

深蓝 · Answer 1 · 2021-10-17T01:11:13+0000

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.

Categories

html - Degrading -webkit-text-security

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags