changer le type de champ de saisie avec jQuery

$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

Ceci est censé changer le #passwordchamp de saisie (avec id="password") correspondant type passwordà un champ de texte normal, puis remplir le texte «Mot de passe».

Cela ne fonctionne pas, cependant. Pourquoi?

Voici le formulaire:

<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>

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

Edit: en effet, en train de tester en ce moment dans Safari, je reçois l'erreur type property cannot be changed.

Edit 2: cela semble être une erreur tout droit sortie de jQuery. L'utilisation du code DOM direct suivant fonctionne très bien:

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

Edit 3: Directement à partir de la source jQuery, cela semble être lié à IE (et pourrait être soit un bogue soit 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";

Encore plus facile ... il n'y a pas besoin de toute la création d'élément dynamique. Créez simplement deux champs séparés, en faisant un champ de mot de passe "réel" (type = "mot de passe") et un champ de mot de passe "faux" (type = "texte"), définissant le texte dans le faux champ sur une couleur gris clair et définir la valeur initiale sur «Mot de passe». Ajoutez ensuite 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 champ «faux» mot de passe, il sera masqué, le champ réel sera affiché et le focus se déplacera vers le champ réel. Ils ne pourront jamais entrer de texte dans le faux champ.

Lorsque l'utilisateur quitte le champ de mot de passe réel, le script verra s'il est vide, et si tel est le cas, il masquera le champ réel et affichera le faux.

Attention à ne pas laisser d'espace entre les deux éléments d'entrée car IE se positionnera un peu après l'autre (rendu de l'espace) et le champ semblera se déplacer lorsque l'utilisateur y entrera / le quittera.

Solution en une étape

$('#password').get(0).type = 'text';

De nos jours, vous pouvez simplement utiliser

$("#password").prop("type", "text");

Mais bien sûr, vous devriez vraiment faire ça

<input type="password" placeholder="Password" />

en tout sauf IE. Il existe également des cales d'espace réservé pour imiter cette fonctionnalité dans IE.

Une solution plus multi-navigateur… J'espère que l'essentiel de cela aide quelqu'un là-bas.

Cette solution essaie de définir l' typeattribut, et en cas d'échec, elle crée simplement un nouvel <input>élément, en préservant les attributs d'élément et les gestionnaires d'événements.

changeTypeAttr.js( GitHub Gist ):

/* x is the <input/> element
   type is the type you want to change it to.
   jQuery is required and assumed to be the "$" variable */
function changeType(x, type) {
    x = $(x);
    if(x.prop('type') == type)
        return x; //That was easy.
    try {
        return x.prop('type', type); //Stupid IE security will not allow this
    } catch(e) {
        //Try re-creating the element (yep... this sucks)
        //jQuery has no html() method for the element, so we have to put into a div first
        var html = $("<div>").append(x.clone()).html();
        var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
        //If no match, we add the type attribute to the end; otherwise, we replace
        var tmp = $(html.match(regex) == null ?
            html.replace(">", ' type="' + type + '">') :
            html.replace(regex, 'type="' + type + '"') );
        //Copy data from old element
        tmp.data('type', x.data('type') );
        var events = x.data('events');
        var cb = function(events) {
            return function() {
                //Bind all prior events
                for(i in events)
                {
                    var y = events[i];
                    for(j in y)
                        tmp.bind(i, y[j].handler);
                }
            }
        }(events);
        x.replaceWith(tmp);
        setTimeout(cb, 10); //Wait a bit to call function
        return tmp;
    }
}

Cela fonctionne pour moi.

$('#password').replaceWith($('#password').clone().attr('type', 'text'));

Une façon ultime d'utiliser jQuery:

Laissez le champ de saisie d'origine masqué à l'écran.

$("#Password").hide(); //Hide it first
var old_id = $("#Password").attr("id"); //Store ID of hidden input for later use
$("#Password").attr("id","Password_hidden"); //Change ID for hidden input

Créez un nouveau champ de saisie à la volée par JavaScript.

var new_input = document.createElement("input");

Migrez l'ID et la valeur du champ de saisie masqué vers le nouveau champ de saisie.

new_input.setAttribute("id", old_id); //Assign old hidden input ID to new input
new_input.setAttribute("type","text"); //Set proper type
new_input.value = $("#Password_hidden").val(); //Transfer the value to new input
$("#Password_hidden").after(new_input); //Add new input right behind the hidden input

Pour contourner l'erreur sur IE comme type property cannot be changed, vous pouvez trouver cela utile comme ci-dessous:

Attachez l'événement click / focus / change au nouvel élément d'entrée, afin de déclencher le même événement sur une entrée cachée.

$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...

L'ancien élément d'entrée caché est toujours à l'intérieur du DOM et réagira donc avec l'événement déclenché par le nouvel élément d'entrée. Au fur et à mesure que l'ID est échangé, le nouvel élément d'entrée agira comme l'ancien et répondra à tout appel de fonction à l'ID de l'ancienne entrée masquée, mais il sera différent.

Un peu délicat mais FONCTIONNE !!! ;-)

Avez-vous essayé d'utiliser .prop ()?

$("#password").prop('type','text');

http://api.jquery.com/prop/

Je n'ai pas testé dans IE (car j'en avais besoin pour un site iPad) - un formulaire dont je ne pouvais pas changer le HTML mais je pouvais ajouter JS:

document.getElementById('phonenumber').type = 'tel';

(Old school JS est moche à côté de tous les jQuery!)

Mais, http://bugs.jquery.com/ticket/1957 établit un lien vers MSDN: "À partir de Microsoft Internet Explorer 5, la propriété type est en lecture / écriture une seule fois, mais uniquement lorsqu'un élément d'entrée est créé avec la méthode createElement et avant qu'il ne soit ajouté au document. " alors peut-être pourriez-vous dupliquer l'élément, changer le type, ajouter au DOM et supprimer l'ancien?

Créez simplement un nouveau champ pour contourner ce problème de sécurité:

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');

J'ai reçu le même message d'erreur en tentant de le faire dans Firefox 5.

Je l'ai résolu en utilisant le code ci-dessous:

<script type="text/javascript" language="JavaScript">

$(document).ready(function()
{
    var passfield = document.getElementById('password_field_id');
    passfield.type = 'text';
});

function focusCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == defaultValue)
    {
        field.value = '';
    }
    if (type == 'pass')
    {
        field.type = 'password';
    }
}
function blurCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == '')
    {
        field.value = defaultValue;
    }
    if (type == 'pass' && field.value == defaultValue)
    {
        field.type = 'text';
    }
    else if (type == 'pass' && field.value != defaultValue)
    {
        field.type = 'password';
    }
}

</script>

Et pour l'utiliser, définissez simplement les attributs onFocus et onBlur de vos champs sur quelque chose comme ceci:

<input type="text" value="Username" name="username" id="username" 
    onFocus="javascript:focusCheckDefaultValue(this, '', 'Username -OR- Email Address');"
    onBlur="javascript:blurCheckDefaultValue(this, '', 'Username -OR- Email Address');">

<input type="password" value="Password" name="pass" id="pass"
    onFocus="javascript:focusCheckDefaultValue(this, 'pass', 'Password');"
    onBlur="javascript:blurCheckDefaultValue(this, 'pass', 'Password');">

J'utilise également cela pour un champ de nom d'utilisateur, donc il bascule une valeur par défaut. Réglez simplement le deuxième paramètre de la fonction sur '' lorsque vous l'appelez.

Il convient également de noter que le type par défaut de mon champ de mot de passe est en fait un mot de passe, juste au cas où un utilisateur n'a pas activé javascript ou si quelque chose ne va pas, de cette façon, son mot de passe est toujours protégé.

La fonction $ (document) .ready est jQuery et se charge lorsque le document a fini de se charger. Cela transforme ensuite le champ de mot de passe en champ de texte. De toute évidence, vous devrez remplacer «password_field_id» par l'ID de votre champ de mot de passe.

N'hésitez pas à utiliser et modifier le code!

J'espère que cela aide tous ceux qui ont eu le même problème que moi :)

- CJ Kent

EDIT: Bonne solution mais pas absolue. Fonctionne sur FF8 et IE8 MAIS pas complètement sur Chrome (16.0.912.75 ver). Chrome n'affiche pas le texte du mot de passe lors du chargement de la page. Aussi - FF affichera votre mot de passe lorsque le remplissage automatique est activé.

Solution simple pour tous ceux qui veulent la fonctionnalité dans tous les navigateurs:

HTML

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password

jQuery

$("#passwordSwitch").change(function(){
    var p = $('#password');
    var h = $('#passwordHide');
    h.val(p.val());
    if($(this).attr('checked')=='checked'){
        h.hide();
        p.show();
    }else{
        p.hide();
        h.show();
    }
});

Cela a fonctionné pour moi.

$('#newpassword_field').attr("type", 'text');

Les propriétés de type ne peuvent pas être modifiées, vous devez remplacer ou superposer l'entrée par une entrée de texte et envoyer la valeur au mot de passe saisi lors de la soumission.

Je suppose que vous pouvez utiliser une image d'arrière-plan qui contient le mot "mot de passe" et le remplacer par une image d'arrière-plan vide .focus().

.blur() ----> image avec "mot de passe"

.focus() -----> image sans "mot de passe"

Vous pouvez également le faire avec du CSS et jQuery. Affichez un champ de texte exactement au-dessus du champ de mot de passe, hide () est sur focus () et concentrez-vous sur le champ de mot de passe ...

Essayez cette
démo est ici

$(document).delegate('input[type="text"]','click', function() {
    $(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">');
}); 
$(document).delegate('input[type="password"]','click', function() {
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
}); 

Cela fonctionne beaucoup plus facilement avec cela:

document.querySelector('input[type=password]').setAttribute('type', 'text');

et afin de le remettre à nouveau dans le champ de mot de passe (en supposant que le champ de mot de passe est la deuxième balise d'entrée avec le type de texte ):

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')

utiliser celui-ci c'est très simple

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />

$('#pass').focus(function() { 
$('#pass').replaceWith("<input id='password' size='70' type='password' value='' name='password'>");
$('#password').focus();
});

<input id='pass' size='70' type='text' value='password' name='password'>

jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));

Ça fera l'affaire. Bien qu'il puisse être amélioré pour ignorer les attributs qui ne sont plus pertinents.

Brancher:

(function($){
  $.fn.changeType = function(type) {  
    return this.each(function(i, elm) {
        var newElm = $("<input type=\""+type+"\" />");
        for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
            var attribute = elm.attributes[iAttr].name;
            if(attribute === "type") {
                continue;
            }
            newElm.attr(attribute, elm.attributes[iAttr].value);
        }
        $(elm).replaceWith(newElm);
    });
  };
})(jQuery);

Usage:

$(":submit").changeType("checkbox");

Violon:

http://jsfiddle.net/joshcomley/yX23U/

Simplement ceci:

this.type = 'password';

tel que

$("#password").click(function(){
    this.type = 'password';
});

Cela suppose que votre champ de saisie a été défini sur "texte" au préalable.

Voici un petit extrait qui vous permet de modifier les typeéléments des documents.

jquery.type.js( GitHub Gist ):

var rtype = /^(?:button|input)$/i;

jQuery.attrHooks.type.set = function(elem, value) {
    // We can't allow the type property to be changed (since it causes problems in IE)
    if (rtype.test(elem.nodeName) && elem.parentNode) {
        // jQuery.error( "type property can't be changed" );

        // JB: Or ... can it!?
        var $el = $(elem);
        var insertionFn = 'after';
        var $insertionPoint = $el.prev();
        if (!$insertionPoint.length) {
            insertionFn = 'prepend';
            $insertionPoint = $el.parent();
        }

        $el.detach().attr('type', value);
        $insertionPoint[insertionFn]($el);
        return value;

    } else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
        // Setting the type on a radio button after the value resets the value in IE6-9
        // Reset value to it's default in case type is set after value
        // This is for element creation
        var val = elem.value;
        elem.setAttribute("type", value);
        if (val) {
            elem.value = val;
        }
        return value;
    }
}

Il contourne le problème en supprimant le inputdu document, en modifiant letype puis en le remettant là où il était à l'origine.

Notez que cet extrait n'a été testé que pour les navigateurs WebKit - aucune garantie sur quoi que ce soit d'autre!

Voici une méthode qui utilise une image à côté du champ de mot de passe pour basculer entre voir le mot de passe (saisie de texte) et ne pas le voir (saisie de mot de passe). J'utilise une image «œil ouvert» et «œil fermé», mais vous pouvez utiliser ce qui vous convient. La façon dont cela fonctionne est d'avoir deux entrées / images et en cliquant sur l'image, la valeur est copiée de l'entrée visible à l'entrée cachée, puis leur visibilité est permutée. Contrairement à la plupart des autres réponses qui utilisent des noms codés en dur, celle-ci est suffisamment générale pour l'utiliser plusieurs fois sur une page. Il se dégrade également gracieusement si JavaScript n'est pas disponible.

Voici à quoi ressemblent deux d'entre eux sur une page. Dans cet exemple, le mot de passe-A a été révélé en cliquant sur son œil.

$(document).ready(function() {
  $('img.eye').show();
  $('span.pnt').on('click', 'img', function() {
    var self = $(this);
    var myinp = self.prev();
    var myspan = self.parent();
    var mypnt = myspan.parent();
    var otspan = mypnt.children().not(myspan);
    var otinp = otspan.children().first();
    otinp.val(myinp.val());
    myspan.hide();
    otspan.show();
  });
});

img.eye {
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
<b>Password-A:</b>
<span class="pnt">
<span>
<input type="password" name="passa">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>

<form>
<b>Password-B:</b>
<span class="pnt">
<span>             
<input type="password" name="passb">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span> 
<span style="display:none">            
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span> 
</span>
</form>

J'aime cette façon de changer le type d'un élément d'entrée: old_input.clone () .... Voici un exemple. Il y a une case à cocher "id_select_multiple". Si cela est changé en "sélectionné", les éléments d'entrée avec le nom "foo" doivent être changés en cases à cocher. Si elle n'est pas cochée, ils devraient redevenir des boutons radio.

  $(function() {
    $("#id_select_multiple").change(function() {
     var new_type='';
     if ($(this).is(":checked")){ // .val() is always "on"
          new_type='checkbox';
     } else {
         new_type="radio";
     }
     $('input[name="foo"]').each(function(index){
         var new_input = $(this).clone();
         new_input.attr("type", new_type);
         new_input.insertBefore($(this));
         $(this).remove();
     });
    }
  )});

voici une solution DOM

myInput=document.getElementById("myinput");
oldHtml=myInput.outerHTML;
text=myInput.value;
newHtml=oldHtml.replace("password","text");
myInput.outerHTML=newHtml;
myInput=document.getElementById("myinput");
myInput.value=text;

J'ai créé une extension jQuery pour basculer entre le texte et le mot de passe. Fonctionne dans IE8 (probablement 6 et 7 également, mais non testé) et ne perdra pas votre valeur ou vos attributs:

$.fn.togglePassword = function (showPass) {
    return this.each(function () {
        var $this = $(this);
        if ($this.attr('type') == 'text' || $this.attr('type') == 'password') {
            var clone = null;
            if((showPass == null && ($this.attr('type') == 'text')) || (showPass != null && !showPass)) {
                clone = $('<input type="password" />');
            }else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){
                clone = $('<input type="text" />');
            }
            $.each($this.prop("attributes"), function() {
                if(this.name != 'type') {
                    clone.attr(this.name, this.value);
                }
            });
            clone.val($this.val());
            $this.replaceWith(clone);
        }
    });
};

Fonctionne comme un charme. Vous pouvez simplement appeler $('#element').togglePassword();pour basculer entre les deux ou donner une option pour `` forcer '' l'action en fonction d'autre chose (comme une case à cocher):$('#element').togglePassword($checkbox.prop('checked'));

Juste une autre option pour tous les amateurs d'IE8, et cela fonctionne parfaitement dans les nouveaux navigateurs. Vous pouvez simplement colorer le texte pour qu'il corresponde à l'arrière-plan de l'entrée. Si vous avez un seul champ, cela changera la couleur en noir lorsque vous cliquerez / vous concentrerez sur le champ. Je ne l'utiliserais pas sur un site public car cela «dérouterait» la plupart des gens, mais je l'utilise dans une section ADMIN où une seule personne a accès aux mots de passe des utilisateurs.

$('#MyPass').click(function() {
    $(this).css('color', '#000000');
});

-OU-

$('#MyPass').focus(function() {
    $(this).css('color', '#000000');
});

Cela, également nécessaire, remettra le texte en blanc lorsque vous quitterez le champ. Simple, simple, simple.

$("#MyPass").blur(function() {
    $(this).css('color', '#ffffff');
});

[Une autre option] Maintenant, si vous avez plusieurs champs que vous recherchez, tous avec le même ID, comme je l'utilise, ajoutez une classe de «passe» aux champs dans lesquels vous souhaitez masquer le texte. les champs de mot de passe saisissent «texte». De cette façon, seuls les champs avec une classe de «réussite» seront modifiés.

<input type="text" class="pass" id="inp_2" value="snoogle"/>

$('[id^=inp_]').click(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#000000');
    }
    // rest of code
});

En voici la deuxième partie. Cela remet le texte en blanc après avoir quitté le champ.

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});

Je viens de faire ce qui suit pour changer le type d'une entrée:

$('#ID_of_element')[0].type = 'text';

et il fonctionne.

J'avais besoin de le faire parce que j'utilisais les datpickers jQuery UI dans un projet ASP NET Core 3.1 et qu'ils ne fonctionnaient pas correctement sur les navigateurs basés sur Chromium (voir: https://stackoverflow.com/a/61296225/7420301 ).