IE 支持在“密码”和“文本”之间翻转输入类型？答案

【问题标题】：IE support for flipping input type between 'password' and 'text'?IE 支持在“密码”和“文本”之间翻转输入类型？
【发布时间】：2013-07-16 07:53:15
【问题描述】：

出于可用性原因，我想在我的登录表单中添加一个复选框，允许用户切换密码字段的屏蔽。

示例代码

我为此获得的基本代码如下（这是快速模型代码，未在 Chrome Canary 以外的任何其他工具中进行测试）：

HTML

<input type="password" name="password" id="password" value="somepassword" />
<input type="checkbox" name="unmask" id="unmask" />

JavaScript

var password = document.getElementById('password'),
    chkbox = document.getElementById('unmask');
        
        
chkbox.addEventListener('click', function (e) {
  password.type = e.currentTarget.checked ? 'text' : 'password';
});

JSFiddle

See the above code in action.

虽然上述概念似乎运行良好，但当您查看将翻转 jQuery's source code 中的 type 属性的代码时，您会看到如下注释：-

// 我们不能允许改变类型属性（因为它会导致 IE 出现问题）

这增加了我在 StackOverflow 其他地方看到的类似引用...

从 Microsoft Internet Explorer 5 开始，type 属性是一次读/写，但仅限于使用 createElement 方法创建输入元素且在将其添加到文档之前。

...似乎表明上述代码不适用于 Internet Explorer。

我想知道的是；是这样吗？如果是这样，这只是 IE7/8 等的问题吗？是否有任何进一步的官方文档。

【问题讨论】：

> 是这样吗？ 您似乎已经发现是这样的，不是吗？仅供参考，这是 jQuery 票：bugs.jquery.com/ticket/1957
@RoatinMarth 根据 MitchS 的评论，它似乎不是，它的反复无常所以想了解原因 - 感谢提供帮助的链接。
MSDN docs for input 'type' property
@IHateLazy 从 IE9 开始，这不再适用。

标签： javascript jquery internet-explorer cross-browser

【解决方案1】：

IE 不允许您更改输入字段的属性类型。

解决方法：

<div id="container">
<input type="password" name="password" id="password" value="somepassword" />
<input type="text" name="passwordtext" id="passtext" value="somepassword" style="display:none;" />
<input type="checkbox" name="unmask" id="unmask" />
</div>

使用 jQuery，而不是原始的 Javascript。在 IE 中，没有 addEventListener，只有 attachEvent（感谢微软的聪明人）。正确绑定事件监听器。

$('#unmask').click(function() {
    if($(this).is(':checked')) {
        $('#password').hide();
        $('#passtext').show();
};
});

【讨论】：

IE9 及以上版本将允许您更改输入字段的类型。
+1 用于回答问题。认为你应该把那个拿回来。

【解决方案2】：

你不能在 IE 上做到这一点。每次当您想在这两种类型之间切换时，您都必须创建新输入并将其替换为旧输入。这是 IE

【讨论】：

【解决方案3】：

这是已知问题，请查看其他论坛和答案。

http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/190995/change-input-type-in-ie http://stackoverflow.com/questions/1987788/javascript-ie6-7-8-change-input-type

如果是这种情况，您可以使用.replaceWith();。

chkbox.addEventListener('click', function (e) {
  var $clone = $("password").clone();
  $clone.attr("type", e.currentTarget.checked ? 'text' : 'password');
  $("password").replaceWith($clone);
});

出于同样的原因，$clone.attr 可能不起作用，因此您也可以尝试从密码排除类型创建对象。

希望这会有所帮助。

【讨论】：

我同意 alex23 关于事件绑定使用 jQuery 的观点。