获取或设置 <input type="password"> 掩码字符答案

【问题标题】：Get or set <input type="password"> masking character获取或设置 <input type="password"> 掩码字符
【发布时间】：2013-12-03 17:36:15
【问题描述】：

是否有任何跨浏览器的方式来获取 <input type="password"> 字段中的密码掩码字符，或者，除此之外，设置它？

例如，OSX 上的 Chrome、Firefox 和 Safari 使用 •，而 iOS 7 上的 Safari 使用 ●。也许其他浏览器可能会使用老式的* - 我不知道。

【问题讨论】：

见这里：stackoverflow.com/questions/1648665/…

标签： html unicode cross-browser cross-platform

【解决方案1】：

似乎以前也有人问过这个问题。查看change password char in HTML 声明无法完成。

快速搜索表明它可以通过 JS 通过伪装来完成，并且不能在常规密码字段上完成，因为它是由浏览器定义的。参考http://www.htmlforums.com/showpost.php?p=655392&postcount=4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
   var k=0;
   var df;
window.onload=function() {
   df=document.forms[0];
df[1].onkeyup=function() {
df[0].value+=df[1].value.charAt(k);
   k++;
for(c=0;c<df[1].value.length;c++) {
   df[1].value=df[1].value.replace(df[1].value.charAt(c),'#');
   }
  }
 }
</script>

</head>
<body>

<noscript>
<div>
Without javascript enabled you will be unable to login
</div>
</noscript>

<form action="http://www.google.com/">
<div>
<input type="hidden" name="password">
<input type="text">
<input type="submit" value="submit password">
</div>
</form>

</body>
</html>

【讨论】：

好的，所以设置已经结束了.. 至少有一种方法可以在不更改字符的情况下检索字符是什么？
df[1].onkeyup 应该是 onkeydown... 否则，当您按下按键时，您会在短时间内看到角色。
嗯...实际上，来自 htmlforums 的代码对我来说似乎都无法正常工作...我尝试编写自己的代码，但我无法避免让键入的字符可见时刻。

【解决方案2】：

这是一个带有样式和处理的完整实现。我希望你喜欢它:)

function showHidePassword(passSelector, textSelector) {
    if ($(passSelector).hasClass("hidden")) {
        $(passSelector).val($(textSelector).val());
        $(textSelector).addClass("hidden");
        $(passSelector).toggleClass("hidden");
    }
    else {
        $(textSelector).val($(passSelector).val());
        $(passSelector).addClass("hidden");
        $(textSelector).toggleClass("hidden");
    }
}

.hidden{
display:none !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class='card'>
<div class='card-body'>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='input-group-text'>
<i class='fa fa-key'></i>
</span>
</div>
<input type='password' id='password' class='form-control'/>
<input type='text' class='form-control hidden' id='passwordContent' disabled/>
<div class='input-group-append'><span class='input-group-text' onclick='showHidePassword("#password","#passwordContent")'><i class='fa fa-eye'></i></span></div>
</div>
</div>
</div>

【讨论】：