Abbau-webkit-text-security

HINWEIS: Wenn Sie intereseted auf die Umsetzung von text-Sicherheit bietet, die ich entwickelt habe eine jQuery-plugin um dies zu erreichen.

Ich bin mit text-security Stil-Eingänge:

input.square-password {
  -webkit-text-security: square;     
}

Web-Browser, die nicht unterstützen text-security Kennwort wird nur angezeigt (keine Sternchen (****)).

Ich freue mich zu degradieren diese Funktionalität auf browser, die diese nicht unterstützen, mithilfe von text-security wenn verfügbar ist oder mit standard-Sternchen.

Die Eingabe von HTML ist:

<input class="square-password textbox" name="paymentpassword" />

Ich habe versucht, das hinzufügen einer type="password" attr:

<input type="password" class="square-password textbox" name="paymentpassword" />

Aber es überschreibt text-security auch auf Browsern, die es unterstützen.

Irgendwelche workarounds? Ist es posible set Sternchen, um die Eingabe über CSS (keine type="password")?

EDIT: text-Sicherheit scheint nur unterstützt durch webkit.

EDIT 2: Eingänge setted als type="password" kann nicht gestylt werden-mit text-Sicherheit. Auch nicht mit !important (Typ="E-Mail" tut)

EDIT 3: @ryan Antwort funktioniert gut auf:

  • Firefox
  • Chrome
  • Oper

Kann nicht ändern, input type im IE8?

  • Tut einem anderen browser als webkit unterstützen derzeit diese überhaupt? Kann nichts finden, außer für die -webkit Variante...
  • Können Sie javascript verwenden?
  • Es scheint nur von webkit unterstützt. Ich bin Festsetzung dieser code, es ist nicht meins.
  • Sicher, irgendeine Lösung oder einen Vorschlag wird willkommen sein
  • So seltsam, dass es nicht funktioniert auf type="password" Frage ich mich, was das noch werden sollen, wenn keine Passwort-Typ Eingänge? Erniedrigende text-Eingaben ist schrecklich.
  • Es ist ein nettes feature, aber es scheint nicht ausgereift genug, noch

InformationsquelleAutor jviotti | 2012-12-11
  1. 9

    Dieser war ziemlich quick and dirty, aber es funktioniert. 

    <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>

    Getestet in chrome und firefox, bin ich auf linux, daher kann ich nicht testen im IE. Jsfiddle hier.

    • Scheint ziemlich IE für mich ein Beweis,. Wenn IE fehlschlägt, auf diese würde ich wirklich geschockt.
    • Im IE8, Sie können nicht ändern die Art der ein <input> mit JS.
    • Toll, feedback über IE wäre wirklich dankbar, ich bin auch unter linux
    • Um rund um den IE Einschränkung, können Sie Sie löschen und neu erstellen die element.
    InformationsquelleAutor Ryan
Schreibe einen Kommentar