changer de type de champ de saisie avec jQuery

Question

<pre class="lang-js prettyprint-override"><code></code><p><code></code><code></code><code></code><code></code>pour un champ de texte normal et puis remplissez le texte « Mot de passe ».</p><p>Il ne fonctionne pas, cependant. Pourquoi ?</p><p>Voici le formulaire :</p><pre class="lang-html prettyprint-override"><code></code></pre></pre>

Answer 1

Il est très probable que cette action est empêchée dans le cadre de la sécurité du navigateur de modèle.

Edit: en effet, les tests actuellement dans Safari, je reçois le message d'erreur type property cannot be changed.

Edit 2: ça semble être une erreur de droit sortie de jQuery. L'aide de le droit DOM code fonctionne très bien:

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

Edit 3: Droit de l'jQuery source, ce qui semble être lié à IE (et peut être d'un bug ou d'une partie de leur modèle de sécurité, mais jQuery n'est pas spécifique):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

Answer 2

Solution d’une seule étape

Answer 3

Encore plus facile... il n'y a aucune nécessité pour tous les élément dynamique de la création. Il suffit de créer deux champs distincts, le "vrai" champ de mot de passe (type="password") et un "faux" champ de mot de passe (type="text"), mise en place du texte dans le faux champ de couleur gris clair et le réglage de la valeur initiale d'un Mot de passe. Puis ajouter quelques lignes de Javascript avec jQuery comme ci-dessous:

    <script type="text/javascript">

        function pwdFocus() {
            $('#fakepassword').hide();
            $('#password').show();
            $('#password').focus();
        }

        function pwdBlur() {
            if ($('#password').attr('value') == '') {
                $('#password').hide();
                $('#fakepassword').show();
            }
        }
    </script>

    <input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
    <input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />

Ainsi, lorsque l'utilisateur entre dans le "faux" champ mot de passe, il sera caché, le champ réel sera affiché et le curseur se déplace vers la réelle sur le terrain. Ils ne seront jamais en mesure de saisir du texte dans le faux champ.

Lorsque l'utilisateur quitte le véritable champ mot de passe, le script va voir si elle est vide, et si oui, va se cacher la réelle sur le terrain et de montrer le faux.

Veillez à ne pas laisser un espace entre les deux éléments d'entrée parce que IE position un petit peu après les autres (le rendu de l'espace) et le domaine sera de se déplacer lorsque l'utilisateur entre et qui sort.

Answer 4

De nos jours, vous pouvez utiliser

Mais bien sûr, vous devriez le faire vraiment juste

dans l’ensemble mais IE. Il y a des cales d’espace réservé là-bas pour imiter cette fonctionnalité dans Internet Explorer aussi bien.

Answer 5

Une solution plus Croix-navigateur... J’espère que l’essentiel de cette aide quelqu'un là-bas.

Cette solution essaie de définir la attribut, et si elle échoue, elle crée simplement un nouveau élément, préserver les attributs de l’élément et les gestionnaires d’événements.

``(GitHub Gist) :