Warum schlägt das Ändern eines Eingabefeldtyps von Passwort in Text mit jQuery fehl?

jQuery: Eingabefeldtyp ändern

In diesem Szenario wird versucht, das Typattribut eines Eingabefelds mithilfe von jQuery von Passwort in Text zu ändern . Der Versuch erweist sich jedoch als erfolglos.

Der bereitgestellte Code bei der Ausführung:

$(document).ready(function() {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');

Nach dem Login kopieren

});

zielt darauf ab, das #password-Feld mit dem als „password“ bezeichneten Typattribut anzusprechen und wandeln Sie es in ein Standardtextfeld um. Anschließend soll das geänderte Feld mit dem Text „Passwort“ gefüllt werden.

Trotz der Existenz des Codes bleibt das gewünschte Ergebnis jedoch aus. Warum?

Der Kern des Problems liegt in Sicherheitsbedenken hinsichtlich der Funktionalität des Browsers. Das Ändern des Typs eines Eingabefelds, insbesondere von einem sicheren Typ wie einem Passwort zu einem regulären, löst Sicherheitsmaßnahmen aus, die vom Browser implementiert werden. Dies wird häufig bei Browsern wie Safari beobachtet.

Um dieses Dilemma zu lösen, ist eine Problemumgehung mit dem bloßen DOM (Document Object Model) ratsam:

<br>var pass = document.createElement('input');<br>pass.type = 'password';<br>document.body.appendChild(pass);<br>pass.type = 'text';<br>pass.value = 'Password';<br>

Dieser Ansatz umgeht die Einschränkungen von jQuery und erzielt gleichzeitig das gewünschte Ergebnis.

Bemerkenswert ist die direkte Änderung des Typs Attribut über jQuery stößt auf Probleme im IE. Der Quellcode von jQuery offenbart diese Einschränkung:

<br>// Wir können nicht zulassen, dass die Typeigenschaft geändert wird (da dies Probleme im IE verursacht)<br>if ( name == " Typ" && jQuery.nodeName( elem, "input" ) && elem.parentNode )</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">throw "type property can't be changed";

Nach dem Login kopieren