8 javascript security passwords accessibility login
我希望改善幼儿网站的可访问性.由于他们的键盘技能非常差,我们得到很多抱怨,输入密码而不能看到角色对他们来说太难了.
我不想将密码完全取消屏蔽,但我想的可能是使用手机样式,其中当前字符仅在被屏蔽之前显示几秒钟.
有没有人知道任何javascript解决方案我可以看看,甚至是什么这个技术实际上被称为所以我可以google它更有效？
我已经实现了一个基本的概念证明,它使用onChange事件来更新纯文本字段,而密码本身存储在隐藏字段中,但我不确定这是否是最好的方法.
我不想使用明文字段的原因是该系统在学校中使用,包括由教师使用.如果其中一个年龄较大的学生能够获得教师管理员密码,那么他们可能会导致很多havok.
具有可切换的明文/密码字段是一个有趣的想法,并且可能比延迟掩蔽方法更容易证明.
如果一个孩子(或那个成年人)的打字技巧太差而无法使用密码字段,你真的认为他们输入几秒钟的字母确实有帮助吗？难道打字员不会专注于键盘而不是屏幕吗？
最简单的解决方案可能是做一些像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>
| 归档时间： |
|
| 查看次数： |
603 次 |
| 最近记录： |