使用jquery更改Input元素的类型

时间:2012-08-08 06:21:11

标签: javascript jquery html html5

我正在尝试更改输入类型,特别是在点击输入后我需要将type="text"更改为type="date"

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

    });
</script>

我想为iPhone应用程序完成此操作。这在iphone 4中不起作用。怎么做?

6 个答案:

答案 0 :(得分:23)

使用此代码:

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

  });
</script>

这是小提琴:http://jsfiddle.net/HNKkW/

答案 1 :(得分:6)

这是一个属性,所以prop()会这样做:

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

请记住将其包装在document.ready函数中!

FIDDLE

答案 2 :(得分:0)

如果您使用早期版本的Jquery

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

      });

或者如果您使用最新版本,请参阅@adeno的回答

答案 3 :(得分:0)

查看此作品jsfiddle

由于使用.attr的浏览器限制,您无法更改输入的类型。请注意您从控制台收到的此警告:

Uncaught Error: type property can't be changed 

您可以使用.prop()

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

我认为这里可能存在一些潜在的问题。用户不会对文本框更改的类型感到困惑吗?

如果可能的话,您应该尝试更改文本框的类型,然后再向用户显示。

答案 4 :(得分:0)

我认为您问题的正确解决方案是使用 .focus .prop 属性。

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

    });
</script>

答案 5 :(得分:0)

对我来说,直接在元素上使用 prop 是行不通的,但是经过大量的摆弄后这对我有用,所以我想分享并且可能会节省一些人头痛。

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