8

我希望为年幼的孩子改善网站的可访问性。由于他们的键盘技术很差，我们收到很多抱怨说输入密码而看不到字符对他们来说太难了。

我不希望密码完全不被屏蔽，但我正在考虑使用手机样式，其中当前字符仅在被屏蔽之前显示几秒钟。

有谁知道我可以查看的任何 javascript 解决方案，或者甚至是这种技术的实际名称，以便我可以更有效地搜索它？

我已经实现了一个基本的概念证明，它使用 onChange 事件来更新纯文本字段，而密码本身存储在隐藏字段中，但我不确定这是否是最好的方法。

更新：

我不想使用明文字段的原因是该系统用于学校，包括教师。例如，如果其中一名年长的学生能够获得教师管理员密码，那么他们可能会造成很多破坏。

拥有一个可切换的明文/密码字段是一个有趣的想法，并且可能比延迟屏蔽方法更容易。

4

5 回答 5

8

如果孩子（或成人）的打字技巧太差而无法使用密码字段，您真的认为显示他们输入几秒钟的字母真的有帮助吗？一个糟糕的打字员不会专注于他们的键盘而不是屏幕吗？

最简单的解决方案可能是在 Vista 中执行类似网络密码字段的操作：设置一个复选框，在普通输入字段和密码字段之间切换（并选择合理的默认值），或者如果登录不敏感，只需使用普通的输入框。

于 2009-05-22T10:09:27.793 回答
6

如果该网站真的是为年幼的孩子准备的，为什么不让他们在纯文本字段中输入密码呢？好像您不会存储他们的信用卡详细信息。

于 2009-05-22T10:09:14.080 回答
5

我可能会做与我现在（与成年人）使用的相反的事情，并将其变成为孩子们上课的机会。

即使该字段成为普通输入字段，然后在其下方包含一个链接，上面写着“ HIDE ”。

点击“ HIDE ”链接会将其切换为“ SHOW ”，并使密码字段的内容加星标。点击“ 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>
于 2009-05-22T10:50:32.157 回答
3

除了其他答案。您还可以在密码字段附近使用虚拟键盘。这样他们就可以单击并输入密码。

于 2009-05-22T10:12:26.167 回答
0

我认为您应该有一个真正的密码字段，其样式为 display:none; 而不是隐藏字段；以及只运行一次的该字段的 onchange 事件，将掩码放入您的概念证明文本字段中......以便浏览器的内置保存密码可以工作。正如其他人所建议的那样，“显示密码”切换框也不会受到伤害。问题是保存表单数据的自动填充往往发生在窗口的加载事件之后，也发生在 dom-ready 事件（由 jquery 使用）之后，因此必须绑定隐藏密码字段的 onchange。

于 2009-05-23T02:41:41.120 回答