Loại đầu vào thay đổi jQuery

Question

Cố gắng thay đổi thuộc tính loại input từ password thành text.

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

Tại sao tính năng này không hoạt động?

Answer 1

Bạn không thể làm điều này với jQuery, it explicitly forbids it vì IE không hỗ trợ nó (kiểm tra giao diện điều khiển của bạn, bạn sẽ thấy một lỗi.

Bạn cần phải loại bỏ các đầu vào và tạo một hình mới nếu đó là những gì bạn đang sau, ví dụ:

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

để được rõ ràng về những hạn chế, jQuery sẽ không cho phép thay đổi type trên <button> hoặc <input> nên thứ e hành vi là trình duyệt chéo phù hợp (kể từ khi IE không cho phép nó, họ quyết định nó không được phép ở khắp mọi nơi). Khi cố gắng bạn sẽ nhận được lỗi này trong bảng điều khiển

Error: type property can't be changed

Answer 2

giải pháp của tôi:

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

Answer 3

Tôi biết tôi là một chút muộn để các trò chơi, nhưng tôi chỉ có thể làm điều này trong IE9 (có vẻ như Microsoft đã quyết định cho phép nó?). Tuy nhiên, tôi phải làm điều đó với JavaScript thẳng. Đây chỉ là mẫu của biểu mẫu có danh sách thả xuống thay đổi loại trường tùy thuộc vào những gì được chọn trong trình đơn thả xuống.

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

Dưới đây là hai chức năng, chấp nhận một loạt các selector (s) như một tham số đó sẽ thực hiện điều này:

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

Sau đó, bạn có thể sử dụng như:

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

    inputNumber(numberArr); 
    inputEmail(emailArr); 

Answer 5

này nên làm việc dễ dàng.

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

Answer 6

SỬ DỤNG prop thay 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

này là khá dễ ngươi. Điều này hoạt động khá tốt.

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