web-dev-qa-db-fra.com

jQuery change le type d'entrée

Essayer de changer l'attribut de type input de password à text.

$('.form').find('input:password').attr({type:"text"});

Pourquoi ça ne marche pas?

jqueryattributes
32
James

Vous ne pouvez pas faire cela avec jQuery, il l'interdit explicitement parce que IE ne le supporte pas (vérifiez sur votre console que vous verrez une erreur.

Vous devez supprimer l'entrée et en créer une nouvelle si c'est ce que vous voulez, par exemple:

$('.form').find('input:password').each(function() {
   $("<input type='text' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();

Vous pouvez essayer ici

Pour être clair sur la restriction, jQuery ne permettra pas de changer type sur un <button> ou <input>, de sorte que le comportement est cohérent pour tous les navigateurs (puisque IE ne le permet pas, ils ont décidé que ce n'était pas autorisé partout). En essayant, vous aurez cette erreur dans la console:

Erreur: la propriété de type ne peut pas être modifiée

51
Nick Craver

ma solution:

    $('#myinput').clone().attr('type','tel').insertAfter('#myinput').prev().remove();
47
Alon

Je sais que je suis un peu en retard pour le jeu, mais je pouvais le faire dans IE9 (il semble que Microsoft ait décidé de le permettre?) Cependant, je devais le faire avec JavaScript. Ceci est juste un exemple de formulaire avec une liste déroulante qui modifie le type de champ en fonction de ce qui est sélectionné dans la liste déroulante.

function switchSearchFieldType(toPassword) {
    $('#SearchFieldText').val('');
    if (toPassword === true) {
        $('#SearchFieldText').get(0).setAttribute('type', 'password');
    } else {
        $('#SearchFieldText').get(0).setAttribute('type', 'text');
    }
}

$('#SelectedDropDownValue').change(function () {
    if ($("select option:selected").val() === 'password') {
        switchSearchFieldType(true);
    }
    else {
        switchSearchFieldType(false);
    }
}).change();
10
JasCav

UTILISER prop à la place attr

$('.form').find('input:password').prop({type:"text"});
9
venkat7668

Cela devrait fonctionner facilement.

$("selector").attr('type', 'hidden'); 
//Changing it to hidden
7
prog_24

Nous sommes en 2018 et jQuery prend désormais en charge cette fonctionnalité. Ce qui suit fonctionnera:

$('.form').find('input:password').attr("type","text");
3
Callat

Voici deux fonctions, acceptant un tableau de sélecteurs en guise de paramètre:

  // Turn input into Number keyboard
  function inputNumber(numArr) {
    if (numArr instanceof Array) {
      for (var i = 0; i < numArr.length; i++) {
        if ($(numArr[i]).length > 0) {
          var copy = $(numArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }
  // Turn input into Email keyboard 
  function inputEmail(emailArr) {
    if (emailArr instanceof Array) {
      for (var i = 0; i < emailArr.length; i++) {
        if ($(emailArr[i]).length > 0) {            
          var copy = $(emailArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }

Vous pouvez ensuite utiliser ceci comme:

  var numberArr = ["#some-input-id", "#another-input-id"];
  var emailArr = ["#some-input-id", "#another-input-id"];

  inputNumber(numberArr);
  inputEmail(emailArr);
0
Pat

C'est assez facile tu. Cela fonctionne très bien.

 $('#btn_showHide').on('click', function() {
    if($(this).text() == 'Show')
    {
      $(this).text('Hide');
      $('#code').attr('type', 'text');
    }
    else
    {
      $(this).text('Show');
      $('#code').attr('type', 'password');
    }
  });
0
Haze Erasmo
function passShowHide(){
  if( $("#YourCheckBoxID").prop('checked') ){
    document.getElementById("EnterPass").attributes["type"].value = "text";
  }
  else{
    document.getElementById("EnterPass").attributes["type"].value="password";}
0
Viktor