Dies funktioniert bei textbasierten Eingaben (z. B. Text, E-Mail usw.), aber tatsächliche Passwort-Eingaben können nicht geändert werden. Anwendungsfall = ???.
input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }
Hallo Chris,
Ich glaube nicht, dass Autoren dies wirklich nutzen können, da WebKit meines Wissens die Formatierung von input type="password" nicht überschreiben lässt.
Aber es funktioniert, schauen Sie sich die Referenz-URL an.
Nein, tut es nicht.
Wie Stephanie Sullivan bemerkte, sorgt das "/" nach "password" dafür, dass der Browser es als "text" behandelt.
<p><input type=password /></p>
Korrigieren Sie die Markup im Fiddle, dann werden Sie sehen, dass es aufhört zu funktionieren.
Hm ja, interessant. Hier ist ein vereinfachtes Fiddle
http://jsfiddle.net/chriscoyier/8WpNg/52/
Ich habe die Markup nicht geändert, da
<input type=password />vollkommen gültig ist. Es ändert den Typ nicht zu "text", es erlaubt Ihnen nur nicht, die Formatierung zu ändern. Es ist irgendwie gesperrt.Ich werde den Schnipsel ändern, um zu erklären, dass er nur für textähnliche Eingaben funktioniert. (Ich habe es bei type=email ausprobiert und es hat dort funktioniert).
Wir dachten, es wäre das "/" darin, das irgendwie die Dinge geändert hat, denn wenn ich mich richtig erinnere, zeigte das Entfernen davon ein anderes Verhalten.
Aber jetzt, wo ich die Referenz-URL ausprobiere, kann ich das Verhalten nicht reproduzieren!??
Haben Sie das jemals bei Eingaben mit type=password funktionieren sehen? Ich dachte, es hätte früher funktioniert...
Auf jeden Fall gibt es, wie ich in meinem ersten Beitrag vorschlage und wie Tab Atkins bestätigt hat, keine Möglichkeit, das zu überschreiben :-(
Ich frage mich, was der Anwendungsfall dafür wäre. Das Ändern der Standard-Passwort-Aufzählungszeichen scheint viele Benutzer zu verwirren.
Man kann in Chrome "Element untersuchen" aufrufen und von "disc" auf "none" ändern, dann werden die tatsächlichen Buchstaben angezeigt. Welchen Zweck hat das dann?
Wenn Sie das Passwort von jemandem festlegen. So etwas wie die Eingabe eines Passworts an WLAN-Zugangspunkten.
Hallo,
Ich versuche, das Zeichen eines Passwort-Eingabefeldes in ein Quadrat zu ändern, ohne Erfolg. Ich habe versucht, danach zu suchen, konnte aber keine Ressource finden, die erklärt, wie das geht.
danke,
Daniel
Ein Zweck von webkit-text-security ist die Erstellung einer PIN-Code-Eingabe auf iOS und Android, die anstelle des alphanumerischen die native Zahlen-Tastatur verwendet. Grundsätzlich: Sie erhalten die Zahlen-Tastatur und mit webkit-text-security erhalten Sie die versteckte Eingabe! Ich verwende auch autocomplete='off', um sicherzustellen, dass die PIN nicht automatisch ausgefüllt werden kann.
Meinte eigentlich:
<input type='tel'>bringt Sie zur Zahlen-Tastatur...Hallo Kinergy. Genau das versuche ich zu erreichen, aber es funktioniert nicht.
Derzeit habe ich eine Eingabe wie diese
<input type="tel" name="myInput" id="myInputID"/>
Und CSS so
input[type="tel"]{
-webkit-text-security: disc;
}
} Ich habe es inline und mit einer bestimmten Klasse versucht, aber beides funktioniert nicht. Ich benutze Android ICS. Irgendwelche Hinweise, wie Sie das zum Laufen gebracht haben :-)
Am Ende habe ich JavaScript geschrieben, um die Eingabe aus einem tel-Eingabefeld zu nehmen und sie durch Sternchen zu ersetzen. Sieht aus wie eine Passwort-Eingabe, aber mit der numerischen Soft-Tastatur. Interessant zu wissen, warum das CSS nicht funktioniert hat.
Hallo Martin,
Es scheint, dass Tastaturen von Drittanbietern dies nicht befolgen – ich habe es mit einer Swype-Tastatur versucht und es hat nicht funktioniert, aber mit der Standard-Android-Tastatur hat es funktioniert!
Vielleicht war das der Grund, warum es bei Ihnen nicht funktioniert hat?
Beste Grüße
Natürlich mag ich Ihre Website, aber Sie müssen die Rechtschreibung in mehreren Ihrer Beiträge überprüfen.
Viele davon sind voller Rechtschreibfehler und es ist sehr schwierig, die Realität zu kommunizieren, aber ich werde auf jeden Fall wiederkommen.
trotzdem werde ich auf jeden Fall wiederkommen.
wiederkommen.
Es funktioniert in Chrome, Safari. Wie macht man das für andere Browser?
Danke für den schnellen Tipp, ich hatte ein Problem mit type='password' und das hat mich wirklich davon gerettet, einen großen Teil meines CSS neu zu schreiben.
Btw im Fiddle scheint es keinen Unterschied zwischen -webkit-text-security: disc und circle zu geben, verpasse ich etwas? Ich benutze die neueste Version von Chrome.
Hallo ,
Ich arbeite plattformübergreifend, entwickle eine einzige Codebasis und führe sie auf allen anderen Plattformen wie Android, iOS, Windows und Blackberry aus.
Ich habe -webkit-text-security: disc; verwendet, um die Eingabe durch Scheiben zu ersetzen, und es funktioniert nur auf wenigen Geräten und wird nicht auf allen Plattformen unterstützt (Windows Phone 8 und Android S2). Nachdem ich recherchiert hatte, erfuhr ich, dass es daran liegt, dass Webkit nur wenige Browser unterstützt. Bitte helfen Sie mir, dieses Problem zu lösen.
Vielen Dank im Voraus.
Hallo ,
Ich verwende JSF-Eingabetextfelder in meiner Anwendung. Diese sollten sowohl auf Desktops als auch auf Mobilgeräten verwendet werden. Auf Mobilgeräten sollte beim Klicken auf das Textfeld die numerische Tastatur aktiviert werden. Kann mir jemand dabei helfen?
Hallo,
Kann mir jemand dabei helfen.
Ich suche nach dem Äquivalent zu -webkit-text-stroke für FF.
Hallo
Ich habe dies in der mobilen App von PhoneGap verwendet, aber es funktioniert nicht in einigen Android-Versionen. Kann mir jemand helfen?
Es funktioniert nicht auf einem Sony Xperia (4.0.4) und Samsung Duos (4.2.2).
Hallo
Ich brauche Aufzählungszeichen für Nicht-Passwort-Felder. Der Code funktioniert in Chrome einwandfrei, aber nicht in Firefox.
Jede Hilfe wird geschätzt.
Gleiches Problem. -webkit-Eigenschaften funktionieren nur in Chrome. Es gibt keine Unterstützung für andere Browser. Wie können wir das erreichen?
Ich bin verwirrt... Ich stelle nur eine Frage... macht dieses webkit-text-security... dass das Passwort sich in so etwas wie ************** verwandelt... diese Sternchen?
Danke für die Veröffentlichung. Es hat bei einem Cordova-Projekt, an dem ich arbeite, geholfen.
Anwendungsfall: doppelt-blinde Eingaben. Ein Paar von Eingaben, die den exakt gleichen Text erfordern, der in beide eingegeben wird. Wenn sie nicht übereinstimmen, werden die Eingaben gelöscht (als ob nichts eingegeben worden wäre).
Sie denken vielleicht, dies sei nur für Passwörter, aber es hilft auch bei der Eingabe von Sozialversicherungsnummern, Geburtsdaten usw. zur Benutzeridentifikation.
Das funktioniert gut. Aber wir haben Probleme mit dem iPhone. Bei der Eingabe der Werte für eine Geschenkkartennummer betrachtet das iPhone dies als Passwortfeld und fragt, ob es gespeichert werden soll oder nicht.
Hinweis: Die obige CSS wird auf das PIN-Nummernfeld der Geschenkkarte angewendet. Das Problem tritt im iOS 10 Safari auf.
Hier ist ein schrecklicher Rat, aus vielen Gründen, am wichtigsten ist, dass dies schlecht für A11y ist. ABER, für die Wissenschaft, hier ist eine Möglichkeit, ein Passwortfeld zu haben... das kein Passwortfeld ist.
https://jsfiddle.net/qaddgf7x/
@Jared
Ich habe Ihren Code ausprobiert https://jsfiddle.net/qaddgf7x/
mit
Chrome Version 61.0.3163.100 – funktioniert wie beworben :)
Opera 48.0.2685.35 – funktioniert wie beworben :)
IE 11.0.9600.16428 – Passworttext wird lesbar angezeigt :(
FireFox 55.0.3 – Passworttext wird lesbar angezeigt :(
Irgendwelche Ideen, warum das so sein könnte?
danke
Weitere Informationen
iMac mit Safari 10.1.2 – funktioniert wie beworben :)
Der Grund ist, dass nicht alle Browser Webkit verwenden. Diejenigen, die es unterstützen, funktionieren wie erwartet. Diejenigen, die es nicht tun, zeigen standardmäßig Klartext an.
Haben Sie die Lösung dafür gefunden?
Mögliche plattformübergreifende Lösung, die eine Ein-Zeichen-Schriftart verwendet, um den Eingabetext zu verdecken.
https://github.com/noppa/text-security
Schauen Sie sich https://github.com/Mottie/input-password-bullet an. Es ersetzt das Aufzählungszeichen durch eine Icon-Schriftart. So kann jedes Icon verwendet werden!
Es ist wichtig zu beachten, dass keine dieser Lösungen in irgendeiner Weise sicher ist. Ich recherchiere eine Lösung dafür und wenn ich eine gefunden habe, werde ich sie teilen.
Denken Sie immer daran.....
Dass -webkit-* bedeutet, dass Browser Webkit unterstützen (Firefox zum Beispiel nicht).
Ein Benutzer könnte mit all diesen Antworten "Element untersuchen" und den tatsächlichen Wert der Eingabe sehen.
Wenn Sie also Chrome verwenden und nur versuchen, den Eingabewert vor Personen zu verbergen, die über die Schulter eines Benutzers schauen, dann ist -webkit-text-security: square; in Ordnung, aber wenn Sie tatsächlich Sicherheit benötigen, werden keine dieser Lösungen funktionieren... leider.
Die einzig wirkliche Antwort wird JavaScript beinhalten. Tatsächlich müssen wir wahrscheinlich die Benutzereingabe erfassen, sie in einer Variablen speichern, die mit Ihrem Formularmodell verbunden ist, und sie dann in ein anderes Zeichen wie einen Stern * konvertieren und den Eingabewert durch die Werte der verschleierten Variable ersetzen. Dies muss natürlich bei jedem Tastendruck erfolgen.
Leider wird meine potenzielle Lösung wahrscheinlich ein Bär bei der Implementierung sein. Ich werde später aktualisieren, nachdem ich den Code geschrieben und Gelegenheit hatte, ihn vor IE und Edge angemessen zu testen.
Das Beispiel input-password-bullet, das ich geteilt habe, ist sicher, soweit es jedes typische Passwort-Eingabefeld ist, weil es die Schriftart des Passwort-Eingabefeldes ersetzt.
@kevin Smothers, es ist erwähnenswert, dass Sie zwar irgendwie Recht haben (je nachdem, was das Ziel/der Verwendungszweck dieses Feldes ist), technisch gesehen ist das Feld type="password" AUCH nicht sicher. Da man das Element einfach inspizieren und den Typ auf "text" ändern kann, ist tatsächlich webkit-text-security genauso sicher wie das Standard-Passwortfeld, das es nachzuahmen versucht, solange Sie Fallbacks für nicht unterstützte Browser bereitstellen.
Ein Anwendungsfall ist die Verhinderung von Browsern, die Benutzer zu fragen, ob sie das Passwort speichern möchten. Moderne Browser haben keine Möglichkeit, die Aufforderung zu unterdrücken, und diese Lösung funktioniert in Chrome (und vielleicht anderen Webkit-Browsern), aber nicht in IE/Edge/Firefox....
Warum möchten Sie nicht, dass der Browser das Passwort speichert? Ein Anwendungsfall ist, wenn ich PDFs zur Verarbeitung hochlade und das Passwort der PDF eingebe, wenn sie eines hat. Es hat keinen Wert, diese Passwörter zu speichern. Wenn ich ein Dutzend PDFs mit Passwörtern hochlade, wollen wir auch nicht, dass der Browser das Passwortfeld voraussfüllt.
Wir haben eine PIN-Code-Eingabe, die unsere Anwendung nach einer bestimmten Zeit sperrt. Der Benutzer gibt den PIN-Code ein, um schneller neu zu authentifizieren.
Bei Verwendung von Passwortfeldern für den PIN-Code versucht der Browser – wenn er dazu in der Lage ist – das Passwort automatisch auszufüllen und platziert den Benutzernamen in einem anderen verfügbaren Feld, in unserem Fall einem Suchfeld. Dies ist unerwünscht.
Wenn ich nun die PIN-Code-Felder vom Typ Text mit -webkit-text-security: disc mache, füllt der Browser das Suchfeld nicht automatisch mit dem Benutzernamen aus. Problem gelöst.
(autofill='off' funktioniert nicht in Chrome)
Das funktioniert nicht in Firefox : (