示例代码

我得到的基本代码如下（ 这是快速的模型代码，除了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属性的代码时，您会看到如下注释： -

//我们不能允许更改type属性（因为它会导致IE中的问题）

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

从Microsoft Internet Explorer 5开始，type属性是read / write-once，但仅在使用createElement方法创建输入元素时以及在将其添加到文档之前。

...似乎表明上述代码对于Internet Explorer来说是不可行的。

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

Answer 1

你不能在IE上做到这一点。每当您想要在这两种类型之间切换时，您必须创建新输入并将其替换为旧输入。这是IE＆lt;的唯一解决方案。 9。

Answer 2

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

Answer 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可能无效，因此您也可以尝试从密码排除类型创建对象。

希望这有帮助。

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

示例代码

3 个答案: