我希望为年幼的孩子改善网站的可访问性。由于他们的键盘技术很差，我们收到很多抱怨说输入密码但看不到字符对他们来说太难了。
我不希望密码完全不被屏蔽，但我正在考虑使用手机样式，在被屏蔽之前只显示当前字符几秒钟。
有谁知道我可以查看的任何 javascript 解决方案，或者甚至是这种技术的实际名称，以便我可以更有效地在 Google 上搜索它？
我已经实现了一个基本的概念证明，它使用 onChange 事件来更新纯文本字段，而密码本身存储在隐藏字段中，但我不确定这是否是最好的方法。
我不想使用明文字段的原因是该系统用于学校，包括教师。例如，如果其中一位年长的学生能够获得教师管理员密码，那么他们可能会造成很多破坏。
拥有一个可切换的明文/密码字段是一个有趣的想法，并且很可能比延迟屏蔽方法更容易。
【问题讨论】：
标签： javascript security login passwords accessibility
如果该网站真的是为年幼的孩子准备的，为什么不让他们在纯文本字段中输入密码呢？您不会存储他们的信用卡详细信息。
【讨论】：
如果孩子（或成人）的打字技能太差而无法使用密码字段，您真的认为显示他们输入几秒钟的字母真的有帮助吗？一个糟糕的打字员不会专注于他们的键盘而不是屏幕吗？
最简单的解决方案可能是在 Vista 中执行类似网络密码字段的操作：有一个复选框，可以在普通输入字段和密码字段之间切换（并选择合理的默认值），或者无论如何登录都不敏感只需使用一个普通的输入字段。
【讨论】：
除了其他答案。您还可以在密码字段附近使用虚拟键盘。这样他们就可以点击并输入密码。
【讨论】：
我可能会做与我现在（与成人）使用的相反的操作，并将其变成为孩子们上课的机会。
即使该字段成为普通输入字段，然后在其下方包含一个链接，上面写着“HIDE”。
点击“HIDE”链接会将其切换为“SHOW”，并制作密码字段已加星标。点击“SHOW”会做相反的事情。
我会想象在一个儿童网站上，您有类似“这是什么？”的图标。如果是这样，HIDE/SHOW 切换将是一个描述为什么要隐藏密码的机会。
示例（横截面。请注意，XDOM 是跨浏览器规范化 DOM 函数的对象。）
...
function init()
{
pwdEl = XDOM.getElementById('pass');
pwdClr = XDOM.getElementById('logindisplay');
toglLnk = XDOM.getElementById('showhidepwd');
pwdClr.style.display = "none"; //initiate
function mirrorType(e)
{
pwdClr.innerHTML = pwdEl.value;
}
function toggleMirror(e)
{
var toggle = pwdClr.style.display;
if (toggle == "none") {
pwdClr.style.display = "inline";
toglLnk.innerHTML = "hide";
} else {
pwdClr.style.display = "none";
toglLnk.innerHTML = "show";
}
pwdClr.innerHTML = pwdEl.value;
XDOM.stopPropagation(e);
XDOM.preventDefault(e);
}
XDOM.addListener(pwdEl, 'keyup', mirrorType, false);
XDOM.addListener(toglLnk, 'click', toggleMirror, false);
}
window.onload = init;
</script>
<style type="text/css">
#logindisplay {display:none;}
.row {display:table-row; padding:4px;}
.cell {display:table-cell; padding:4px;}
</style>
</head>
<body>
<div>
<h2>Test Show-Hide Login</h2>
<form>
<div class="row">
<p class="cell">
<label for="pass">Password</label>
</p>
<p class="cell">
<input type="password" id="pass" name="pass" value="" size="15" maxlength="15" />
<br /><a href="#jsenable" id="showhidepwd"><span id="togglelogin">show</span></a>
<span id="logindisplay" style="display:none;"> </span>
</p>
</div>
</form>
<p id="jsenable"><!-- a note about enabling JavaScript here --></p>
</div>
【讨论】：
我认为您应该有一个 real 密码字段，其样式为 display:none;而不是隐藏字段；以及只运行一次的该字段的 onchange 事件，将掩码放入您的概念证明文本字段中......以便浏览器的内置保存密码可以工作。正如其他人所建议的那样，“显示密码”切换框也不会受到伤害。问题是保存的表单数据的自动填充往往发生在窗口的加载事件之后，也发生在 dom-ready 事件（由 jquery 使用）之后，因此必须绑定隐藏密码字段的 onchange。
【讨论】：