$(document).ready(function() {
// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');
});
Dies soll das #password
Eingabefeld (mit id="password"
) ändern , von demtype
password
eines normalen Textfelds und dann den Text „Passwort“ eingeben.
Es funktioniert jedoch nicht. Warum?
Hier ist das Formular:
<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
<ol>
<li>
<div class="element">
<input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
</div>
</li>
<li>
<div class="element">
<input type="password" name="password" id="password" value="" class="input-text" />
</div>
</li>
<li class="button">
<div class="button">
<input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
</div>
</li>
</ol>
</form>
javascript
jquery
html-input
Richard Knop
quelle
quelle
Antworten:
Es ist sehr wahrscheinlich, dass diese Aktion als Teil des Sicherheitsmodells des Browsers verhindert wird.
Bearbeiten: In der Tat, beim Testen in Safari bekomme ich den Fehler
type property cannot be changed
.Edit 2: Das scheint ein Fehler zu sein, der direkt aus jQuery stammt. Die Verwendung des folgenden geraden DOM-Codes funktioniert einwandfrei:
Bearbeiten 3: Direkt aus der jQuery-Quelle scheint dies mit dem IE in Zusammenhang zu stehen (und könnte entweder ein Fehler oder ein Teil des Sicherheitsmodells sein, aber jQuery ist nicht spezifisch):
quelle
attr
aber das Ändern destype
Attributs fürinput
Elemente ermöglicht.Noch einfacher ... es ist nicht erforderlich, alle dynamischen Elemente zu erstellen. Erstellen Sie einfach zwei separate Felder, wobei eines zum "echten" Passwortfeld (Typ = "Passwort") und eines zum "falschen" Passwortfeld (Typ = "Text") wird. Setzen Sie den Text im falschen Feld auf eine hellgraue Farbe und Setzen Sie den Anfangswert auf 'Passwort'. Fügen Sie dann mit jQuery einige Zeilen Javascript wie folgt hinzu:
Wenn der Benutzer das 'falsche' Passwortfeld eingibt, wird es ausgeblendet, das reale Feld wird angezeigt und der Fokus wird auf das reale Feld verschoben. Sie können niemals Text in das gefälschte Feld eingeben.
Wenn der Benutzer das Feld für das echte Kennwort verlässt, sieht das Skript, ob es leer ist, und wenn ja, wird das Feld für das echte Kennwort ausgeblendet und das gefälschte angezeigt.
Achten Sie darauf, kein Leerzeichen zwischen den beiden Eingabeelementen zu lassen, da der IE ein wenig nacheinander positioniert (das Leerzeichen wird gerendert) und sich das Feld zu bewegen scheint, wenn der Benutzer es betritt / verlässt.
quelle
$('#password').show(); $('#password').focus();
$('#password').show().focus();
Ein-Schritt-Lösung
quelle
document.getElementById
sollte ausreichen und du brauchst jQuery dafür nicht! ;-)Heutzutage können Sie nur verwenden
Aber natürlich sollten Sie das wirklich einfach tun
in allen außer IE. Es gibt Platzhalter-Shims, die diese Funktionalität auch im IE nachahmen.
quelle
placeholder="Password"
. Die HTML-Spezifikation und der MDN für dasplaceholder
Attribut. Ein JavaScript-Shim fürplaceholder
.Eine browserübergreifendere Lösung… Ich hoffe, das Wesentliche hilft jemandem da draußen.
Diese Lösung versucht, das
type
Attribut<input>
festzulegen. Wenn dies fehlschlägt, wird einfach ein neues Element erstellt, wobei Elementattribute und Ereignishandler beibehalten werden.changeTypeAttr.js
( GitHub Gist ):quelle
Das funktioniert bei mir.
quelle
Eine ultimative Möglichkeit, jQuery zu verwenden:
Lassen Sie das ursprüngliche Eingabefeld vom Bildschirm ausgeblendet.
Erstellen Sie im Handumdrehen ein neues Eingabefeld mit JavaScript.
Migrieren Sie die ID und den Wert vom ausgeblendeten Eingabefeld in das neue Eingabefeld.
Um den Fehler im IE wie zu umgehen
type property cannot be changed
umgehen, können Sie dies wie folgt nützlich finden:Fügen Sie ein Klick- / Fokus- / Änderungsereignis an ein neues Eingabeelement an, um dasselbe Ereignis bei versteckten Eingaben auszulösen.
Das alte versteckte Eingabeelement befindet sich noch im DOM und reagiert daher auf das durch das neue Eingabeelement ausgelöste Ereignis. Wenn die ID ausgetauscht wird, verhält sich das neue Eingabeelement wie das alte und reagiert auf jeden Funktionsaufruf der ID der alten versteckten Eingabe, sieht jedoch anders aus.
quelle
Haben Sie versucht, .prop () zu verwenden?
http://api.jquery.com/prop/
quelle
Ich habe nicht im IE getestet (da ich dies für eine iPad-Site benötigte) - ein Formular, in dem ich den HTML-Code nicht ändern konnte, aber JS hinzufügen konnte:
(Old School JS ist hässlich neben all der jQuery!)
Aber http://bugs.jquery.com/ticket/1957 Links zu MSDN: „Wie von Microsoft Internet Explorer 5 wird die Art Eigenschaft Lese- / Schreib einmal, aber nur , wenn ein Eingangselement mit der createelement- Methode erstellt und bevor es dem Dokument hinzugefügt wird. " Vielleicht könnten Sie das Element duplizieren, den Typ ändern, zu DOM hinzufügen und das alte entfernen?
quelle
Erstellen Sie einfach ein neues Feld, um diese Sicherheitssache zu umgehen:
quelle
Ich habe die gleiche Fehlermeldung erhalten, als ich versucht habe, dies in Firefox 5 zu tun.
Ich habe es mit dem folgenden Code gelöst:
Um es zu verwenden, setzen Sie einfach die Attribute onFocus und onBlur Ihrer Felder auf etwa Folgendes:
Ich verwende dies auch für ein Benutzernamenfeld, sodass ein Standardwert umgeschaltet wird. Setzen Sie einfach den zweiten Parameter der Funktion auf '', wenn Sie sie aufrufen.
Es kann auch erwähnenswert sein, dass der Standardtyp meines Passwortfelds tatsächlich Passwort ist, nur für den Fall, dass ein Benutzer kein Javascript aktiviert hat oder wenn etwas schief geht, ist sein Passwort auf diese Weise weiterhin geschützt.
Die Funktion $ (document) .ready ist jQuery und wird geladen, wenn das Laden des Dokuments abgeschlossen ist. Dadurch wird das Kennwortfeld in ein Textfeld geändert. Natürlich müssen Sie 'password_field_id' in die ID Ihres Passwortfelds ändern.
Fühlen Sie sich frei, den Code zu verwenden und zu ändern!
Hoffe das hilft allen, die das gleiche Problem hatten wie ich :)
- CJ Kent
EDIT: Gute Lösung, aber nicht absolut. Funktioniert unter FF8 und IE8, jedoch nicht vollständig unter Chrome (16.0.912.75 ver). Chrome zeigt das Passwort nicht an beim der Seite nicht an. Außerdem - FF zeigt Ihr Passwort an, wenn das automatische Ausfüllen aktiviert ist.
quelle
Einfache Lösung für alle, die die Funktionalität in allen Browsern nutzen möchten:
HTML
jQuery
quelle
Typeneigenschaften können nicht geändert werden. Sie müssen die Eingabe durch eine Texteingabe ersetzen oder überlagern und den Wert beim Senden an die Kennworteingabe senden.
quelle
Ich denke, Sie könnten ein Hintergrundbild verwenden, das das Wort "Passwort" enthält, und es wieder in ein leeres Hintergrundbild ändern
.focus()
..blur()
----> Bild mit "Passwort".focus()
-----> Bild ohne "Passwort"Sie können dies auch mit CSS und jQuery tun. Lassen Sie ein Textfeld genau über dem Passwortfeld anzeigen, hide () ist auf focus () und fokussiert auf das Passwortfeld ...
quelle
Versuchen Sie diese
Demo ist hier
quelle
Damit funktioniert es viel einfacher:
und um es wieder in das Passwortfeld zurückzusetzen ( vorausgesetzt, das Passwortfeld ist das 2. Eingabe-Tag mit Texttyp ):
quelle
Das hat bei mir funktioniert.
quelle
Verwenden Sie dieses, es ist sehr einfach
quelle
quelle
quelle
Dies wird den Trick machen. Es könnte zwar verbessert werden, Attribute zu ignorieren, die jetzt irrelevant sind.
Plugin:
Verwendung:
Geige:
http://jsfiddle.net/joshcomley/yX23U/
quelle
Einfach das:
sowie
Dies setzt voraus, dass Ihr Eingabefeld zuvor auf "Text" gesetzt wurde.
quelle
Hier ist ein kleiner Ausschnitt, mit dem Sie die
type
Elemente in Dokumenten ändern können .jquery.type.js
( GitHub Gist ):Das Problem wird umgangen, indem das
input
Dokument aus dem Dokument entfernt, geänderttype
und dann wieder an den ursprünglichen Ort zurückgesetzt wird.Beachten Sie, dass dieses Snippet nur für WebKit-Browser getestet wurde - keine Garantie für irgendetwas anderes!
quelle
delete jQuery.attrHooks.type
, um die spezielle Behandlung von Eingabetypen durch jQuery zu entfernen.Hier ist eine Methode, die ein Bild neben dem Kennwortfeld verwendet, um zwischen dem Anzeigen des Kennworts (Texteingabe) und dem Nichtanzeigen (Kennworteingabe) umzuschalten. Ich verwende ein Bild mit "offenem Auge" und "geschlossenem Auge", aber Sie können alles verwenden, was zu Ihnen passt. Die Funktionsweise besteht aus zwei Eingaben / Bildern. Beim Klicken auf das Bild wird der Wert von der sichtbaren Eingabe in die ausgeblendete kopiert und anschließend die Sichtbarkeit vertauscht. Im Gegensatz zu vielen anderen Antworten, bei denen fest codierte Namen verwendet werden, ist diese allgemein genug, um sie auf einer Seite mehrmals zu verwenden. Es wird auch ordnungsgemäß verschlechtert, wenn JavaScript nicht verfügbar ist.
So sehen zwei davon auf einer Seite aus. In diesem Beispiel wurde das Passwort-A durch Klicken auf das Auge angezeigt.
quelle
Auf diese Weise kann ich den Typ eines Eingabeelements ändern: old_input.clone () .... Hier ist ein Beispiel. Es gibt ein Kontrollkästchen "id_select_multiple". Wenn dies auf "ausgewählt" geändert wird, sollten Eingabeelemente mit dem Namen "foo" in Kontrollkästchen geändert werden. Wenn das Kontrollkästchen deaktiviert ist, sollten sie wieder zu Optionsfeldern werden.
quelle
Hier ist eine DOM-Lösung
quelle
Ich habe eine jQuery-Erweiterung erstellt, um zwischen Text und Kennwort umzuschalten. Funktioniert in IE8 (wahrscheinlich auch 6 & 7, aber nicht getestet) und verliert Ihren Wert oder Ihre Attribute nicht:
Klappt wunderbar. Sie können einfach anrufen
$('#element').togglePassword();
, um zwischen den beiden zu wechseln, oder eine Option angeben, um die Aktion basierend auf etwas anderem (wie einem Kontrollkästchen) zu erzwingen:$('#element').togglePassword($checkbox.prop('checked'));
quelle
Nur eine weitere Option für alle IE8-Liebhaber, und sie funktioniert perfekt in neueren Browsern. Sie können den Text einfach so einfärben, dass er dem Hintergrund der Eingabe entspricht. Wenn Sie ein einzelnes Feld haben, ändert sich die Farbe in Schwarz, wenn Sie auf das Feld klicken / fokussieren. Ich würde dies nicht auf einer öffentlichen Website verwenden, da es die meisten Leute "verwirren" würde, aber ich verwende es in einem ADMIN-Bereich, in dem nur eine Person Zugriff auf die Benutzerkennwörter hat.
-ODER-
Dadurch wird der Text beim Verlassen des Feldes wieder weiß. Einfach, einfach, einfach.
[Eine weitere Option] Wenn Sie nun mehrere Felder haben, nach denen Sie suchen, alle mit derselben ID, für die ich sie verwende, fügen Sie den Feldern, in denen Sie den Text ausblenden möchten, eine Klasse von 'Pass' hinzu Passwortfelder geben 'Text' ein. Auf diese Weise werden nur die Felder mit der Klasse "Bestanden" geändert.
Hier ist der zweite Teil davon. Dadurch wird der Text nach dem Verlassen des Feldes wieder weiß.
quelle
Ich habe nur Folgendes getan, um den Typ einer Eingabe zu ändern:
und es funktioniert.
Ich musste dies tun, weil ich jQuery UI-Datepicker in einem ASP NET Core 3.1-Projekt verwendete und sie in Chromium-basierten Browsern nicht richtig funktionierten (siehe: https://stackoverflow.com/a/61296225/7420301 ).
quelle