0

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

示例代码

我为此获得的基本代码如下（这是快速样机代码，未在 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

请参阅上面的代码。

虽然上述概念似乎工作得很好，但当您查看将翻转jQuery 源代码type中的属性的代码时，您会看到如下注释：-

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

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

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

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

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

4

3 回答 3

0

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

于 2012-10-31T13:04:56.203 回答
0

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();
};
});
于 2012-10-31T13:07:17.427 回答
0

好吧，这是已知问题，只需查看其他论坛和答案即可。

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-更改输入类型

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

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

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

希望这可以帮助。

于 2012-10-31T13:09:20.123 回答