Pourquoi la modification d'un type de champ de saisie du mot de passe au texte avec jQuery échoue-t-elle ?

jQuery : Modification du type de champ de saisie

Ce scénario implique une tentative de modification de l'attribut de type d'un champ de saisie du mot de passe au texte à l'aide de jQuery . Cependant, l'effort s'avère infructueux.

Le code fourni, lors de l'exécution :

$(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');

Copier après la connexion

});

vise à cibler le champ #password avec l'attribut type désigné comme mot de passe et à le basculer sur un champ de texte standard. Par la suite, il vise à remplir le champ modifié avec le texte « Mot de passe ».

Cependant, malgré l'existence du code, le résultat souhaité ne se matérialise pas. Pourquoi ?

Le nœud du problème réside dans les problèmes de sécurité au sein des fonctionnalités du navigateur. Changer le type d'un champ de saisie, en particulier d'un type sécurisé comme un mot de passe à un type normal, déclenche des mesures de sécurité mises en œuvre par le navigateur. Ceci est souvent observé avec des navigateurs tels que Safari.

Pour résoudre ce dilemme, une solution de contournement utilisant le DOM (Document Object Model) nu est conseillée :

<br>var pass = document.createElement('input');<br>pass.type = 'mot de passe';<br>document.body.appendChild(pass);<br>pass.type = 'text';<br>pass.value = 'Mot de passe';<br>

Cette approche contourne les limites de jQuery tout en obtenant le résultat souhaité.

Il est à noter que la modification directe de l'attribut type via jQuery rencontre des problèmes dans IE. Le code source de jQuery révèle cette contrainte :

<br>// Nous ne pouvons pas autoriser la modification de la propriété type (car cela provoque des problèmes dans IE)<br>if ( name == " type" && 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";

Copier après la connexion