2012-08-08 82 views
8

我正在嘗試更改輸入類型,特別是在點擊輸入後,我需要將type="text"更改爲type="date"使用jquery更改輸入元素的類型

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

    }); 
</script> 

我想做到這一點的iPhone應用程序。這在iphone 4中不起作用。怎麼辦?

+2

我可以問你想做這個的理由嗎?我很確定必須有更好的方法。 – Undefined 2012-08-08 06:21:59

+0

在iphone 4中,佔位符未顯示輸入類型dat。所以我想在點擊字段後更改類型 – sree 2012-08-08 06:23:58

+0

更好地有兩個輸入字段並隱藏文本字段並在點擊事件中顯示日期字段。 – Ankur 2012-08-08 06:25:09

回答

21

使用此代碼:

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

    }); 
</script> 

這裏是小提琴:http://jsfiddle.net/HNKkW/

6

這是一個屬性,所以prop()將做到這一點:

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

記住包裹,在一個功能的document.ready!

FIDDLE

0

如果你使用jQuery

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

     }); 

的早期版本,或者如果您使用最新的看到@adeno的回答

0

看到這個工作jsfiddle

由於瀏覽器中的限制,使用.attr不能更改輸入的類型。注意這個警告,您從控制檯接收:

Uncaught Error: type property can't be changed 

您可以通過使用.prop()

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

我覺得有可能是有點潛在的問題在這裏更改類型。用戶不會被文本框更改的類型所困惑嗎?

如果在所有可能的情況下嘗試更改文本框的類型,然後將其顯示給用戶。

0

我覺得你的問題的正確解決方案是使用.focus.prop性能。

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

    }); 
</script> 
0

我使用道具直接在單元不能正常工作,然而,這有很多擺弄後爲我工作,所以我想分享,也許救一個人頭痛。

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