Thay đổi loại yếu tố Đầu vào bằng cách sử dụng jquery

Question

Tôi đang cố thay đổi loại đầu vào, cụ thể sau khi nhấp vào đầu vào tôi cần thay đổi type="text" thành type="date".

<input type="text" placeholder="DOB" id="dob" name="dob" /> 
<script> 
    $("#dob").click(function() { 
     $(this).attr('type', 'date'); 

    }); 
</script> 

Tôi muốn thực hiện việc này cho ứng dụng iPhone. Điều này không làm việc trong iphone 4. Làm thế nào có thể làm điều này?

Answer 1

Sử dụng mã này:

<input type="text" placeholder="DOB" id="dob" name="dob" /> 
<script> 
    $("#dob").click(function(){ 
     $(this).prop('type', 'date'); 

    }); 
</script> 

Đây là fiddle: http://jsfiddle.net/HNKkW/

Answer 2

Đó là một tài sản, vì vậy prop() sẽ làm điều đó:

$("#dob").on('click', function(){ 
    $(this).prop('type', 'date'); 
});​ 

Và hãy nhớ để bọc rằng trong một hàm document.ready!

FIDDLE

Answer 3

Nếu bạn sử dụng phiên bản trước của Jquery

$('body').delegate('#dob','click',function(){ 
      $(this).attr('type', 'date'); 

     }); 

Hoặc nếu bạn sử dụng mới nhất thấy @adeno 's câu trả lời

Answer 4

Xem làm việc jsfiddle này.

Bạn không thể thay đổi loại đầu vào do các hạn chế trong trình duyệt sử dụng .attr. Lưu ý cảnh báo này bạn nhận được từ giao diện điều khiển:

Uncaught Error: type property can't be changed 

Bạn có thể thay đổi kiểu bằng cách sử dụng .prop()

$("#dob").on('click', function(){ 
    $(this).prop('type', 'date'); 
});​ 

Tôi nghĩ rằng có thể là một chút của một vấn đề tiềm ẩn ở đây. Người dùng có bị nhầm lẫn với kiểu hộp văn bản thay đổi không?

Nếu có thể bạn nên thử và thay đổi loại hộp văn bản trước khi hiển thị cho người dùng.

Answer 5

Tôi nghĩ rằng giải pháp đúng cho vấn đề của bạn đang sử dụng .focus và .prop tài sản.

<script> 
    $("#dob").focus(function() { 
     $(this).prop('type', 'date'); 

    }); 
</script> 

Answer 6

cho tôi sử dụng prop trực tiếp trên phần tử không hoạt động, điều này tuy nhiên làm việc cho tôi sau rất nhiều không quan trọng, vì vậy tôi muốn chia sẻ và có thể tiết kiệm được một ai đó đau đầu.

$(document).on('change', '#showPass', function() { 
    if ($(this).is(':checked')) { 
     $(this).parents('form').find('#passField').prop("type", "text"); 
    } else { 
     $(this).parents('form').find('#passField').prop("type", "password"); 
    } 
});