Javascript 使用 jquery 更改输入元素的类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11858741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change type of an Input element using jquery
提问by Sreehari
I am trying to change type of input, specifically after click into input I need to change type="text"to type="date".
我正在尝试更改输入类型，特别是在单击输入后我需要更改type="text"为type="date".
<input type="text" placeholder="DOB" id="dob" name="dob" />
<script>
$("#dob").click(function () {
$(this).attr('type', 'date');
});
</script>
I want to accomplish this for a iphone App. This is not working in iphone 4. How can do this?
我想为 iphone 应用程序完成此操作。这在 iphone 4 中不起作用。如何做到这一点？
回答by Nishu Tayal
Use this code :
使用此代码：
<input type="text" placeholder="DOB" id="dob" name="dob" />
<script>
$("#dob").click(function(){
$(this).prop('type', 'date');
});
</script>
Here is the fiddle : http://jsfiddle.net/HNKkW/
这是小提琴：http: //jsfiddle.net/HNKkW/
回答by adeneo
回答by coolguy
If you use Earlier version of Jquery
如果您使用早期版本的 Jquery
$('body').delegate('#dob','click',function(){
$(this).attr('type', 'date');
});
Or if you use latest see @adeno 's answer
或者，如果您使用最新的，请参阅@adeno 的答案
回答by Undefined
See this working jsfiddle.
请参阅此工作jsfiddle。
You can't change the type of an input due to restrictions in the browser using .attr. Note this warning you receive from the console:
由于浏览器中的限制，您无法更改输入的类型.attr。请注意您从控制台收到的警告：
Uncaught Error: type property can't be changed
You can change the type by using .prop()
您可以使用.prop()更改类型
$("#dob").on('click', function(){
$(this).prop('type', 'date');
});?
I think there may be a bit of an underlying problem here. Would the user not be confused by the type of text-box changing?
我认为这里可能存在一些潜在的问题。用户不会被文本框的类型改变所迷惑吗？
If at all possible you should try and change the type of the text-box before showing it to the user.
如果可能的话，您应该在向用户显示之前尝试更改文本框的类型。
回答by user3226778
I think the correct solution for your problem is using the .focusand the .propproperties.
我认为您的问题的正确解决方案是使用.focus和.prop属性。
<script>
$("#dob").focus(function () {
$(this).prop('type', 'date');
});
</script>
回答by ccrez
for me using propdirectly on the element was not working, this however worked for me after a lot of fiddling, so I wanted to share and maybe save someone the headache.
对我来说，直接在元素上使用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");
}
});
