jQuery 更改输入类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3541514/
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
jQuery change input type
提问by James
Trying to change inputtype attribute from passwordto text.
尝试将input类型属性从更改password为text。
$('.form').find('input:password').attr({type:"text"});
Why this doesn't work?
为什么这不起作用？
回答by Nick Craver
You can't do this with jQuery, it explicitly forbids itbecause IE doesn't support it (check your console you'll see an error.
你不能用 jQuery 做到这一点，它明确禁止它，因为 IE 不支持它（检查你的控制台你会看到一个错误。
You have to remove the input and create a new one if that's what you're after, for example:
如果这是您所追求的，则必须删除输入并创建一个新输入，例如：
$('.form').find('input:password').each(function() {
$("<input type='text' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();
To be clear on the restriction, jQuery will not allow changing typeon a <button>or <input>so the behavior is cross-browser consistent (since IE doens't allow it, they decided it's disallowed everywhere). When trying you'll get this error in the console:
要清楚的限制，jQuery将不允许改变type一个<button>或<input>如此行为是跨浏览器一致的（因为IE好好尝试一下允许的话，他们决定它是不允许随处可见）。尝试时，您将在控制台中收到此错误：
Error:type property can't be changed
错误：无法更改类型属性
回答by Alon
my solution:
我的解决方案：
$('#myinput').clone().attr('type','tel').insertAfter('#myinput').prev().remove();
回答by venkat7668
USE propinstead attr
使用prop替代attr
$('.form').find('input:password').prop({type:"text"});
回答by JasCav
I know I'm a little late to the game, but I was just able to do this in IE9 (it appears that Microsoft decided to allow it?). However, I had to do it with straight JavaScript. This is just a sample of a form with a dropdownlist that changes the field type depending on what is selected in the dropdown.
我知道我玩这个游戏有点晚了，但我只能在 IE9 中做到这一点（似乎微软决定允许它？）。但是，我必须直接使用 JavaScript 来完成。这只是一个带有下拉列表的表单示例，该列表根据下拉列表中选择的内容更改字段类型。
function switchSearchFieldType(toPassword) {
$('#SearchFieldText').val('');
if (toPassword === true) {
$('#SearchFieldText').get(0).setAttribute('type', 'password');
} else {
$('#SearchFieldText').get(0).setAttribute('type', 'text');
}
}
$('#SelectedDropDownValue').change(function () {
if ($("select option:selected").val() === 'password') {
switchSearchFieldType(true);
}
else {
switchSearchFieldType(false);
}
}).change();
回答by prog_24
This should work easily.
这应该很容易工作。
$("selector").attr('type', 'hidden');
//Changing it to hidden
回答by Callat
It's 2018 and jQuery does support this feature now. The following will work:
现在是 2018 年，jQuery 现在确实支持此功能。以下将起作用：
$('.form').find('input:password').attr("type","text");
回答by Literate Corvette
//Get current input object
var oldInput = $('foo');
//Clone a new input object from it
var newInput = oldInput.clone();
//Set the new object's type property
newInput.prop('type','text');
//Replace the old input object with the new one.
oldInput.replaceWith(newInput);
回答by Viktor
function passShowHide(){
if( $("#YourCheckBoxID").prop('checked') ){
document.getElementById("EnterPass").attributes["type"].value = "text";
}
else{
document.getElementById("EnterPass").attributes["type"].value="password";}
回答by Haze Erasmo
This is pretty easy thou. This works pretty fine.
你这很容易。这工作得很好。
$('#btn_showHide').on('click', function() {
if($(this).text() == 'Show')
{
$(this).text('Hide');
$('#code').attr('type', 'text');
}
else
{
$(this).text('Show');
$('#code').attr('type', 'password');
}
});
回答by Pat
Here are two functions, accepting an array of selector(s) as a parameter that will accomplish this:
这里有两个函数，接受一个选择器数组作为参数来完成这个：
// Turn input into Number keyboard
function inputNumber(numArr) {
if (numArr instanceof Array) {
for (var i = 0; i < numArr.length; i++) {
if ($(numArr[i]).length > 0) {
var copy = $(numArr[i]);
var numEle = copy.clone();
numEle.attr("type", "number");
numEle.insertBefore(copy);
copy.remove();
}
}
}
}
// Turn input into Email keyboard
function inputEmail(emailArr) {
if (emailArr instanceof Array) {
for (var i = 0; i < emailArr.length; i++) {
if ($(emailArr[i]).length > 0) {
var copy = $(emailArr[i]);
var numEle = copy.clone();
numEle.attr("type", "number");
numEle.insertBefore(copy);
copy.remove();
}
}
}
}
You can then use this like:
然后你可以像这样使用它：
var numberArr = ["#some-input-id", "#another-input-id"];
var emailArr = ["#some-input-id", "#another-input-id"];
inputNumber(numberArr);
inputEmail(emailArr);
