iPhone 风格的密码输入改进

最近，著名的可用性专家 Jakob Nielsen 撰写了一篇名为 停止密码掩码 的文章，其中他声称在用户输入密码时隐藏它们是不好的做法。他指的是 <input type=password … /> 元素的默认浏览器行为，其中输入的文本会变成点而不是显示输入的真实字符。他说，这会降低用户对其输入内容的信心，从而引发一系列问题，例如更多输入错误、用户选择过于简单的密码或复制粘贴复杂的密码（安全性较低）。最终效果是用户满意度降低，以及您可能获得的利润减少。

当然，他在这些方面都是正确的，但是密码掩码并不是为了好玩而开发并设置为默认的。它是为了防止窥视者查看您的屏幕并了解您的密码。Jakob 并没有忽略这一点，他建议将其设置为复选框样式选项。

诚然，有人偷看你的屏幕来获取密码的情况非常罕见。我现在独自一人在办公室，就像我大部分时间一样，我敢打赌角落里的那盆植物没有任何秘密摄像头。我相信你们很多人也处于类似的环境中。但我认为将重要的安全措施留给用户通常不是一个好选择。 Gruber 链接到 Jakob 的文章，并指出 iPhone 已经有一个有趣的解决方案在使用。

iPhone 如何处理密码输入

• iPhone 输入会将文本转换为点，就像网页密码输入一样，但在短暂延迟后，您可以短暂看到输入的字符。
• 当您按下每个字符时，iPhone 键盘会弹出一个窗口，以可视方式验证您刚刚输入的字符。

这是一种非常棒的处理密码输入的方式，可以将其应用到 Web 上。这种处理密码输入的方式结合了提供更好的按键反馈、提高用户信心以及大部分隐藏密码以使其更难以被随意查看的功能。

我们可以使用 jQuery 来复制这两个想法！

显示按下的键

这里有一些带有密码输入的超级简单的表单标记

<form action="#" id="login-form-1">
  <div>
      <label for="user-password">Password</label>
      <input type="password" id="user-password" name="user-password" />
  </div>
</form>

我们将使用该内部 div 设置一些相对定位，然后为一个特殊的 div 设置一些样式，我们将动态地插入其中以显示按下的键。

#login-form-1 div { 
   position: relative;
}
#login-form-1 div #letterViewer { 
   display: none; 
   position: absolute; 
   left: 240px; 
   top: -30px; 
   width: 100px; 
   font: bold 72px Helvetica, Sans-Serif; 
}

然后使用 jQuery，我们可以附加该 div 并将按键事件附加到输入。当按下键时，该 div 将淡入显示字母，然后淡出。这将模拟 iPhone 键盘按下字母的验证。

$(function() {
    $("#login-form-1 div").append("<div id='letterViewer'>");
    $("#user-password").keypress(function(e) {
        $("#letterViewer")
            .html(String.fromCharCode(e.which))
            .fadeIn(200, function() {
                $(this).fadeOut(200);
            });        
    });
});

当然，您可以根据需要对其进行任何样式设置。

将文本更改为点/仅显示最后一个字符

下一个理论是在您键入文本时将其转换为点，但在短暂延迟后允许您短暂看到输入的字符。这有点困难。您可以将密码输入更改为 type="text" 类型，但是随后将值更改为点会很麻烦，因为当然您需要提交字段的真实值而不是点。您不能将输入保留为 type="password" 类型，因为在这些输入中除了点之外什么也无法显示。

解决方案是**复制**密码字段，将其更改为文本输入，并隐藏原始字段。这样，您可以使用新字段并根据需要对其进行操作，但最终您提交现在隐藏的密码输入，您会使用当前键入的数据对其进行更新。

我们可以着手编写此代码，但幸运的是，DECAF^o 博客已经完成了繁重的工作，并 创建了一个 jQuery 插件 来执行此操作。

只需定位您的密码输入并调用插件即可

$('#user-password-2').dPassword();

当然，像任何好的插件一样，您可以将一堆选项作为参数传递，例如切换之前的延迟、复制输入的前缀等等。

 

查看演示   下载文件

 

你们怎么看？这是一种好的折衷方案还是两败俱伤的结果？