changer le type de champ de saisie avec jQuery

205
$(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>
Richard Knop
la source
Pourquoi voulez-vous le changer?
ChaosPandion
Je veux avoir un texte de mot de passe utilisateur en entrée afin que les utilisateurs sachent quoi remplir (car il n'y a pas d'étiquette).
Richard Knop
1
Regardez cette vidéo: youtube.com/watch?v=5YeSqtB0kfE
Grijesh Chauhan

Réponses:

258

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";
sans paupières
la source
12
dois dire que c'est la mesure de sécurité la plus inutile que j'ai jamais vue. Il ne semble pas y avoir beaucoup de différence entre changer rapidement le type d'un champ et le remplacer par un tout nouveau. Très étrange ... de toute façon, a fonctionné pour moi. Merci!
2
ce n'est pas un modèle de sécurité, je peux confirmer qu'il ne fonctionne pas dans IE7, IE8 avec une erreur: impossible d'obtenir la propriété type
Code Novitiate
J'ai trouvé cette réponse lors d'une recherche et c'était d'une grande aide. Cependant, ma solution était de simplement supprimer cette vérification de jquery. Fonctionne très bien.
Michael
2
@Michael, je recommande de ne pas modifier directement jQuery. En plus de cela, cela crée un risque de conflit à l'avenir, ce contrôle est probablement en place pour une raison. Si vous n'avez pas à vous soucier de la prise en charge d'IE, vous pouvez à la place implémenter une extension jQuery parallèle attrmais permettant de changer l' typeattribut sur les inputéléments.
paupières
1
Ajout de la mise à jour 4 - j'espère que cela aidera à expliquer les choses et comment les contourner.
ClarkeyBoy
76

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.

Joe
la source
2
Vous pouvez également chaîner les fonctions suivantes: $('#password').show(); $('#password').focus();as$('#password').show().focus();
Anriëtte Myburgh
J'ai les deux champs ensemble comme ceci: <input type = "text" /> <input type = "password" /> et j'obtiens toujours un décalage vertical dans IE (9) quand ils s'échangent. Le chaînage des méthodes ($ ('# mot de passe'). Show (). Focus ();) n'a pas aidé à cela, mais c'était un mouvement d'optimisation amusant. Dans l'ensemble, c'était la meilleure solution.
AVProgrammer
si l'utilisateur déplace le focus vers un autre contrôle et que l'onblur est déclenché, le focus retournera au champ de faux mot de passe
Allan Chua
Vous devez utiliser: if ($ ('# password'). Val () == '') {plutôt que: if ($ ('# password'). Attr ('value') == '') {Sinon, le la valeur du mot de passe affichera toujours «mot de passe» sur le flou.
Stephen Paul
75

Solution en une étape

$('#password').get(0).type = 'text';
Sanket Sahu
la source
5
document.getElementByIddevrait être suffisant et vous n'avez pas besoin de jQuery pour cela! ;-)
Gandaro
2
En fait, selon la question, c'était une solution jQuery.
Sanket Sahu
17
ou encore plus court, $ ('# mot de passe') [0] .type = 'text';
Sanket Sahu
2
cela peut provoquer des problèmes avec IE9, le type n'est pas défini. Idéal pour les autres navigateurs.
kravits88
1
IE 8 générera en fait une erreur si vous essayez de changer le type de "mot de passe" en "texte" de cette manière. L'erreur indique "Impossible d'obtenir la propriété type. Cette commande n'est pas prise en charge."
allieferr
41

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.

Andrew
la source
1
IE 8 est mort maintenant. Vive les solutions HTML natives. Jetez vos cales d'espacement et célébrez.
Andrew
14

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;
    }
}
BMiner
la source
C'est trop dommage, si tout le monde dit F ... ça, alors rien ne fonctionnera, cela devrait fonctionner sur plusieurs navigateurs ou pas du tout.
Val
En parlant d'essentiels ... vous devez en créer un pour ce code. gist.github.com
Christopher Parker
8

Cela fonctionne pour moi.

$('#password').replaceWith($('#password').clone().attr('type', 'text'));
stephenmuss
la source
Merci! Cela résout les problèmes que j'avais avec les autres réponses ne fonctionnant pas dans IE. N'oubliez pas qu'il s'agit d'un nouvel objet, vous devrez donc le récupérer dans le DOM si vous avez stocké $ ('# mot de passe') dans une variable.
kravits88
1
Cela ne fonctionne pas dans IE8. Vous obtenez toujours l'erreur "la propriété de type ne peut pas être modifiée".
jcoffland
6

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 !!! ;-)

Ken Pega
la source
5

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

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

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

Mark Mckelvie
la source
Fonctionne dans Cordova 6 webview
Joel Caton
4

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?

capuche
la source
3

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');
jantimon
la source
3

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

cjk84
la source
3

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();
    }
});
hohner
la source
3

Cela a fonctionné pour moi.

$('#newpassword_field').attr("type", 'text');
Ashhab
la source
2

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.

Jesse Kochis
la source
2

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

rhodium
la source
2

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+'">');
}); 
Suresh Pattu
la source
2

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')
Sedat Kilinc
la source
1

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" />
Farhan
la source
1
$('#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'>
vankaiser
la source
1
jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));
UnLoCo
la source
1

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

joshcomley
la source
1

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.

Michael
la source
1

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!

jb.
la source
En fait, oubliez cela - utilisez simplement delete jQuery.attrHooks.typepour supprimer la gestion spéciale des types d'entrée par jQuery.
jb.
1

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.

À quoi ça ressemble

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

John Hascall
la source
0

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();
     });
    }
  )});
guettli
la source
Cela ne fonctionne pas dans IE8. Vous obtenez toujours l'erreur "la propriété de type ne peut pas être modifiée".
jcoffland
0

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;
chiliNUT
la source
0

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

J_A_X
la source
0

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
});
Sparky aka tom
la source
0

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

Pablo Alexis Domínguez Grau
la source