用 jQuery 改变输入字段的类型

$(document).ready(function() {
// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');
});

这是假定改变 #password输入字段(与 id="password")的 type password到一个正常的文本字段，然后填写文本“密码”。

但是没用，为什么？

表格如下:

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
<ol>
<li>
<div class="element">
<input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
</div>
</li>
<li>
<div class="element">
<input type="password" name="password" id="password" value="" class="input-text" />
</div>
</li>
<li class="button">
<div class="button">
<input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
</div>
</li>
</ol>
</form>
374893 次浏览
小开
最佳答案

作为浏览器安全模型的一部分，很可能会阻止该操作。

编辑:实际上，现在在Safari中测试，我得到了错误type property cannot be changed。

编辑2:这似乎是一个错误直接从jQuery。使用以下直接的DOM代码就可以了:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

编辑3:直接从jQuery源代码来看，这似乎与IE有关(可能是一个bug或他们安全模型的一部分，但jQuery不是特定的):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
throw "type property can't be changed";
小开

只需要创建一个新的字段来绕过这个安全的东西:

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
.val($oldPassword.val())
.appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');
小开

类型属性不能更改，您需要用文本输入替换或覆盖输入，并在提交时将值发送给密码输入。

小开

使用jQuery的终极方法:

将原始输入字段隐藏在屏幕中。

$("#Password").hide(); //Hide it first
var old_id = $("#Password").attr("id"); //Store ID of hidden input for later use
$("#Password").attr("id","Password_hidden"); //Change ID for hidden input

通过JavaScript创建新的输入字段。

var new_input = document.createElement("input");

将ID和值从隐藏的输入字段迁移到新的输入字段。

new_input.setAttribute("id", old_id); //Assign old hidden input ID to new input
new_input.setAttribute("type","text"); //Set proper type
new_input.value = $("#Password_hidden").val(); //Transfer the value to new input
$("#Password_hidden").after(new_input); //Add new input right behind the hidden input

要解决IE上类似type property cannot be changed的错误，你可能会发现下面的方法很有用:

将click/focus/change事件附加到新的输入元素，以便在隐藏的输入上触发相同的事件。

$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...

旧的隐藏输入元素仍然在DOM中，因此将与新输入元素触发的事件进行反应。当ID交换时，新的输入元素将像旧的输入元素一样，并响应对旧的隐藏输入的ID的任何函数调用，但看起来不同。

有点棘手，但有效!!；-）

小开

更容易……不需要创建所有动态元素。只需创建两个单独的字段，其中一个为“真实”密码字段(type="password")，另一个为“假”密码字段(type="text")，将假字段中的文本设置为浅灰色，并将初始值设置为“password”。然后用jQuery添加几行Javascript代码，如下所示:

    <script type="text/javascript">


function pwdFocus() {
$('#fakepassword').hide();
$('#password').show();
$('#password').focus();
}


function pwdBlur() {
if ($('#password').attr('value') == '') {
$('#password').hide();
$('#fakepassword').show();
}
}
</script>


<input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
<input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />

因此，当用户输入“假”密码字段时，它将被隐藏，真实字段将被显示，焦点将移动到真实字段。他们将永远无法在假字段中输入文本。

当用户离开真实的密码字段时，脚本将查看它是否为空，如果为空，将隐藏真实的字段并显示假的字段。

注意不要在两个输入元素之间留下空格，因为IE会将一个元素置于另一个元素之后(呈现空格)，并且当用户进入/退出字段时，字段会出现移动。

小开

我还没有在IE中测试(因为我需要这个用于iPad站点)-一个我不能改变HTML但我可以添加JS的表单:

document.getElementById('phonenumber').type = 'tel';

(和jQuery比起来，老派JS太丑了!)

但是，http://bugs.jquery.com/ticket/1957链接到MSDN:“从Microsoft Internet Explorer 5开始，type属性只读/写一次，但仅当使用createElement方法创建输入元素时，并且在将其添加到文档之前。”所以也许你可以复制元素，改变类型，添加到DOM并删除旧的元素?

小开

用这个很简单

<input id="pw" onclick="document.getElementById('pw').type='password';
document.getElementById('pw').value='';"
name="password" type="text" value="Password" />
小开

我在尝试在Firefox 5中执行此操作时收到了相同的错误消息。

我用下面的代码解决了这个问题:

<script type="text/javascript" language="JavaScript">


$(document).ready(function()
{
var passfield = document.getElementById('password_field_id');
passfield.type = 'text';
});


function focusCheckDefaultValue(field, type, defaultValue)
{
if (field.value == defaultValue)
{
field.value = '';
}
if (type == 'pass')
{
field.type = 'password';
}
}
function blurCheckDefaultValue(field, type, defaultValue)
{
if (field.value == '')
{
field.value = defaultValue;
}
if (type == 'pass' && field.value == defaultValue)
{
field.type = 'text';
}
else if (type == 'pass' && field.value != defaultValue)
{
field.type = 'password';
}
}


</script>

要使用它，只需设置你的字段的onFocus和onBlur属性如下所示:

<input type="text" value="Username" name="username" id="username"
onFocus="javascript:focusCheckDefaultValue(this, '', 'Username -OR- Email Address');"
onBlur="javascript:blurCheckDefaultValue(this, '', 'Username -OR- Email Address');">


<input type="password" value="Password" name="pass" id="pass"
onFocus="javascript:focusCheckDefaultValue(this, 'pass', 'Password');"
onBlur="javascript:blurCheckDefaultValue(this, 'pass', 'Password');">

我也将此用于用户名字段，因此它将切换为默认值。只需将函数的第二个参数设置为“当您调用它时”。

同样值得注意的是，我的密码字段的默认类型实际上是密码，以防用户没有启用javascript或出现错误，这样他们的密码仍然受到保护。

美元(文档)。ready函数是jQuery，当文档加载完成时加载。然后将密码字段更改为文本字段。显然，你必须将“password_field_id”更改为密码字段的id。

请随意使用和修改代码!

希望这能帮助到每个和我有同样问题的人:)

——肯特

< p >编辑: 很好的解决方案，但不是绝对的。在FF8和IE8上工作，但不完全在Chrome上(16.0.912.75版本)。当页面加载时，Chrome不会显示密码文本。 当自动填充开关打开时，FF将显示您的密码
小开
我喜欢这样，改变输入元素的类型:old_input.clone().... 这里有一个例子。有一个复选框“id_select_multiple”。如果将其更改为"selected"，则名称为"foo"的输入元素应更改为复选框。如果未选中，它们应该再次变成单选按钮 
  $(function() {
$("#id_select_multiple").change(function() {
var new_type='';
if ($(this).is(":checked")){ // .val() is always "on"
new_type='checkbox';
} else {
new_type="radio";
}
$('input[name="foo"]').each(function(index){
var new_input = $(this).clone();
new_input.attr("type", new_type);
new_input.insertBefore($(this));
$(this).remove();
});
}
)});
小开 
$('#pass').focus(function() {
$('#pass').replaceWith("<input id='password' size='70' type='password' value='' name='password'>");
$('#password').focus();
});


<input id='pass' size='70' type='text' value='password' name='password'>
小开

下面是一个小片段，允许您更改文档中元素的type。

jquery.type.js (GitHub要点):

var rtype = /^(?:button|input)$/i;


jQuery.attrHooks.type.set = function(elem, value) {
// We can't allow the type property to be changed (since it causes problems in IE)
if (rtype.test(elem.nodeName) && elem.parentNode) {
// jQuery.error( "type property can't be changed" );


// JB: Or ... can it!?
var $el = $(elem);
var insertionFn = 'after';
var $insertionPoint = $el.prev();
if (!$insertionPoint.length) {
insertionFn = 'prepend';
$insertionPoint = $el.parent();
}


$el.detach().attr('type', value);
$insertionPoint[insertionFn]($el);
return value;


} else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
// Setting the type on a radio button after the value resets the value in IE6-9
// Reset value to it's default in case type is set after value
// This is for element creation
var val = elem.value;
elem.setAttribute("type", value);
if (val) {
elem.value = val;
}
return value;
}
}

它通过从文档中删除input来解决这个问题，改变type，然后把它放回原来的位置。

请注意，这段代码只针对WebKit浏览器进行了测试——对其他任何浏览器都不能保证!

小开

一步解决方案

$('#password').get(0).type = 'text';
小开

一个更跨浏览器的解决方案……我希望这篇文章的要点能帮助到一些人。

此解决方案尝试设置type属性，如果失败，则简单地创建一个新的<input>元素，保留元素属性和事件处理程序。

changeTypeAttr.js (GitHub要点):

/* x is the <input/> element
type is the type you want to change it to.
jQuery is required and assumed to be the "$" variable */
function changeType(x, type) {
x = $(x);
if(x.prop('type') == type)
return x; //That was easy.
try {
return x.prop('type', type); //Stupid IE security will not allow this
} catch(e) {
//Try re-creating the element (yep... this sucks)
//jQuery has no html() method for the element, so we have to put into a div first
var html = $("<div>").append(x.clone()).html();
var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
//If no match, we add the type attribute to the end; otherwise, we replace
var tmp = $(html.match(regex) == null ?
html.replace(">", ' type="' + type + '">') :
html.replace(regex, 'type="' + type + '"') );
//Copy data from old element
tmp.data('type', x.data('type') );
var events = x.data('events');
var cb = function(events) {
return function() {
//Bind all prior events
for(i in events)
{
var y = events[i];
for(j in y)
tmp.bind(i, y[j].handler);
}
}
}(events);
x.replaceWith(tmp);
setTimeout(cb, 10); //Wait a bit to call function
return tmp;
}
}
小开 
jQuery.fn.outerHTML = function() {
return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));
小开

这样就可以了。尽管可以改进为忽略现在不相关的属性。

插件:

(function($){
$.fn.changeType = function(type) {
return this.each(function(i, elm) {
var newElm = $("<input type=\""+type+"\" />");
for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
var attribute = elm.attributes[iAttr].name;
if(attribute === "type") {
continue;
}
newElm.attr(attribute, elm.attributes[iAttr].value);
}
$(elm).replaceWith(newElm);
});
};
})(jQuery);

用法:

$(":submit").changeType("checkbox");

小提琴:

http://jsfiddle.net/joshcomley/yX23U/

小开

我猜你可以使用一个包含单词“password”的background-image，并在.focus()上将其更改为空的background-image。

.blur() ---->图像与“密码”

.focus() ----->图像没有“密码”

你也可以用一些CSS和jQuery来实现。有一个文本字段显示在密码字段的顶部，hide()是在focus()和聚焦在密码字段…

小开

简单:

this.type = 'password';

如

$("#password").click(function(){
this.type = 'password';
});

这是假设您的输入字段事先设置为“text”。

小开

简单的解决方案，所有人都想在所有浏览器的功能:

超文本标记语言

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password

jQuery

$("#passwordSwitch").change(function(){
var p = $('#password');
var h = $('#passwordHide');
h.val(p.val());
if($(this).attr('checked')=='checked'){
h.hide();
p.show();
}else{
p.hide();
h.show();
}
});
小开

这对我很有用。

$('#password').replaceWith($('#password').clone().attr('type', 'text'));
小开

现在，你可以用

$("#password").prop("type", "text");

当然，你应该这样做

<input type="password" placeholder="Password" />

除了IE。在IE中也有占位符垫片来模仿这个功能。

小开

这里有一个DOM解决方案

myInput=document.getElementById("myinput");
oldHtml=myInput.outerHTML;
text=myInput.value;
newHtml=oldHtml.replace("password","text");
myInput.outerHTML=newHtml;
myInput=document.getElementById("myinput");
myInput.value=text;
小开

你试过使用.prop()吗?

$("#password").prop('type','text');

http://api.jquery.com/prop/

小开

我已经创建了一个jQuery扩展之间切换文本和密码。适用于IE8(可能是6&7以及，但没有测试)，不会失去你的价值或属性:

$.fn.togglePassword = function (showPass) {
return this.each(function () {
var $this = $(this);
if ($this.attr('type') == 'text' || $this.attr('type') == 'password') {
var clone = null;
if((showPass == null && ($this.attr('type') == 'text')) || (showPass != null && !showPass)) {
clone = $('<input type="password" />');
}else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){
clone = $('<input type="text" />');
}
$.each($this.prop("attributes"), function() {
if(this.name != 'type') {
clone.attr(this.name, this.value);
}
});
clone.val($this.val());
$this.replaceWith(clone);
}
});
};

效果非常好。你可以简单地调用$('#element').togglePassword();来在两者之间切换，或者给出一个选项来基于其他东西(如复选框)“强制”操作:$('#element').togglePassword($checkbox.prop('checked'));

小开

试试这个
演示在这里 < / >强

$(document).delegate('input[type="text"]','click', function() {
$(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">');
});
$(document).delegate('input[type="password"]','click', function() {
$(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
});
小开

这样工作起来更容易:

document.querySelector('input[type=password]').setAttribute('type', 'text');

为了再次将其转换回密码字段，(假设密码字段是第二个文本类型的输入标记):

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')
小开

下面是一个方法，它使用密码字段旁边的图像来在看到密码(文本输入)和看不到密码(密码输入)之间进行切换。我使用“睁开眼睛”和“闭上眼睛”的图像，但你可以使用任何适合你的图像。它的工作方式是有两个输入/图像，在单击图像时，值从可见输入复制到隐藏输入，然后交换它们的可见性。与许多其他使用硬编码名称的答案不同，这个答案足够通用，可以在页面上多次使用它。如果JavaScript不可用，它也会优雅地降级。

这是其中两个在一页上的样子。在这个例子中，密码a是通过点击它的眼睛来显示的。

How it looks .

$(document).ready(function() {
$('img.eye').show();
$('span.pnt').on('click', 'img', function() {
var self = $(this);
var myinp = self.prev();
var myspan = self.parent();
var mypnt = myspan.parent();
var otspan = mypnt.children().not(myspan);
var otinp = otspan.children().first();
otinp.val(myinp.val());
myspan.hide();
otspan.show();
});
});
img.eye {
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<form>
<b>Password-A:</b>
<span class="pnt">
<span>
<input type="password" name="passa">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>


<form>
<b>Password-B:</b>
<span class="pnt">
<span>
<input type="password" name="passb">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>

小开

这对我很管用。

$('#newpassword_field').attr("type", 'text');
小开

这是所有IE8爱好者的又一个选择，在新浏览器上也能完美运行。您可以只给文本上色以匹配输入的背景。如果你有一个单一的字段，当你点击/聚焦在该字段上时，这将改变颜色为黑色。我不会在公共站点上使用这个，因为它会“迷惑”大多数人，但我在一个只有一个人可以访问用户密码的ADMIN部分中使用它。

$('#MyPass').click(function() {
$(this).css('color', '#000000');
});

或者,

$('#MyPass').focus(function() {
$(this).css('color', '#000000');
});

这也是需要的，当您离开字段时，将文本更改为白色。简单，简单，简单。

$("#MyPass").blur(function() {
$(this).css('color', '#ffffff');
});

[另一种选择] 现在，如果你有几个字段，你正在检查，都有相同的ID，因为我正在使用它，添加一个类的“pass”字段，你想隐藏的文本。设置密码字段类型为“text”。这样，只有类为'pass'的字段才会被改变 

<input type="text" class="pass" id="inp_2" value="snoogle"/>


$('[id^=inp_]').click(function() {
if ($(this).hasClass("pass")) {
$(this).css('color', '#000000');
}
// rest of code
});

这是第二部分。这将在您离开字段后将文本更改为白色。

$("[id^=inp_]").blur(function() {
if ($(this).hasClass("pass")) {
$(this).css('color', '#ffffff');
}
// rest of code
});
小开

我只是做了以下改变输入的类型:

$('#ID_of_element')[0].type = 'text';

这很有效。

我需要这样做，因为我在一个asp.net Core 3.1项目中使用jQuery UI datepickers，他们不能在基于chromium的浏览器上正常工作(参见:https://stackoverflow.com/a/61296225/7420301)。


提交答案