2012-08-08 45 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"); 
    } 
});