我可以让 <input type=text> 看起来像 <input type=password> 吗？答案

【问题标题】：Can I get <input type=text> to look like <input type=password>?我可以让 <input type=text> 看起来像 <input type=password> 吗？
【发布时间】：2013-06-13 15:03:13
【问题描述】：

我正在尝试处理一个令人沮丧的 Internet Explorer 问题，该问题阻止我将 jquery-validate 与 jquery-placeholder 结合使用。简而言之，验证不适用于type=password 的字段。

More info Here

我想出的一个可能的解决方法是将我的密码修改为type=text，但这当然会以纯文本而不是******* 显示密码。

是否有任何巧妙的html/js/css 技巧让text 字段显示为passwords？

【问题讨论】：

听起来更像是一个 jQuery 问题。你所有的东西都是最新的吗？
是的，jQuery 1.10.1，以及两个插件的最新版本。 This is something of a known issue with the plugins;试图找到解决方法。 Test case 如果你好奇的话（查看 IE9）。
我对其他建议和修复持开放态度，但请记住，我已经尝试了很多事情，并且已经为 way 奋斗了太久。我只是想要一个修复 - 不在乎此时有多 hacky ;-)

标签： javascript css validation passwords

【解决方案1】：

当这些答案出现时，我有了自己的顿悟。乍一看，它似乎有效。我会查看其他答案并接受看起来效果最好并且最不“hacky”的任何方法。

当我发现问题仅在字段为空（仍有占位符文本）时才存在时，我提出了这种方法，因此，仅不会通过“必需”验证。我的解决方法是在输入内容时将其更改为type=password。

我的方法：

$('#password, #password_confirm').keyup(function(){
    if ($(this).attr('type') === 'text') {
        if ($(this).val().length > 0) {
            $(this).attr('type', 'password');
        }
    } else if ($(this).val() == "") {
        $(this).attr('type', 'text');
    }
});

【讨论】：

【解决方案2】：

因此，您可能会进行这样的设置。

具有模拟密码值的隐藏输入类型

所以我猜 jquery 会是明智的

//everytime the password changes hidden changes with it.
$('#passwordId').change(function() {
 $('#hiddenID').val() = $('#passwordId').val();
});

html:

<input type="password" id="passwordId" />
<input type="hidden" id="hiddenID" />

因此，这将允许您验证隐藏的输入，该输入与密码的值相同。

【讨论】：

这是个好办法；我在样式选择列表和文件输入字段等方面看到了类似的东西......在我的特定情况下它可能会有点草率，因为我正在以编程方式生成许多表单元素。我必须为插入额外元素等的密码字段创建特殊情况。但是，这确实看起来它只需做一点工作就可以解决问题。
我想我会使用我想出的代码，但我会给你打勾，因为这个答案实际上直接回答了所问的问题，并且可能对未来的 Google 员工。

【解决方案3】：

我能想到的第一个“hack”是将“data-changed”属性添加到 input="password" 字段，然后将“onchange”事件附加到设置“data-changed”的密码字段 = = true，这样您就可以验证值“密码”是否实际上是由用户输入的（数据更改 == true），或者它是否由占位符插件本身提交。

【讨论】：

噢噢，聪明的。所以我可以创建另一个rule 用于检查data- 属性的密码验证。让我快速尝试一下；-)
呸。我喜欢你的方法比我的好一点，但由于某种原因我没有让它工作（可能只是遗漏了一些明显的东西）。我想我只是要使用我想出的代码并减少损失。不过谢谢你 - 聪明而简单的方法。