jQuery change input type

Question

Provare a modificare l'attributo input da password a text.

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

Perché questo non funziona?

Answer 1

Non si può fare questo con jQuery, it explicitly forbids it perché IE non lo supporta (controllare la console verrà visualizzato un errore.

È necessario rimuovere l'ingresso e crearne uno nuovo se è quello che che stai dopo, per esempio:

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

You can give it a try here

per essere chiari, sulla restrizione, jQuery non consentirà la modifica type su un <button> o <input> così esimo Il comportamento è coerente con il browser (poiché IE non lo consente, ha deciso che non è consentito in tutto il mondo). Quando si cerca si otterrà questo errore nella console:

Error: type property can't be changed

Answer 2

la mia soluzione:

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

Answer 3

So di essere un po 'tardi per il gioco, ma ero solo in grado di fare questo in IE9 (sembra che Microsoft abbia deciso di permetterlo?). Tuttavia, ho dovuto farlo con JavaScript dritto. Questo è solo un esempio di un modulo con un elenco a discesa che cambia il tipo di campo in base a ciò che è selezionato nel menu a discesa.

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

Answer 4

Qui sono due funzioni, che accetta un array di selettore (s) come parametro che compirà questo:

// 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(); 
     } 
     } 
    } 
    } 

È possibile quindi utilizzare questo tipo:

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

    inputNumber(numberArr); 
    inputEmail(emailArr); 

Answer 5

Questo dovrebbe funzionare facilmente

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

Answer 6

USO prop invece attr

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

Answer 7

function passShowHide(){ 
    if($("#YourCheckBoxID").prop('checked')){ 
    document.getElementById("EnterPass").attributes["type"].value = "text"; 
    } 
    else{ 
    document.getElementById("EnterPass").attributes["type"].value="password";} 

Answer 8

Questo è abbastanza facile tu. Funziona abbastanza bene.

$('#btn_showHide').on('click', function() { 
    if($(this).text() == 'Show') 
    { 
     $(this).text('Hide'); 
     $('#code').attr('type', 'text'); 
    } 
    else 
    { 
     $(this).text('Show'); 
     $('#code').attr('type', 'password'); 
    } 
    });