前端进阶：制作一个普通的登录界面，如何有更好的体验?

如果让您实现一个普通的登录界面，您会如何做？

通常做法

一般情况，我们会根据UI设计师的设计稿，去适配访问设备的屏幕尺寸用html做登录界面好看，加入必要的表单验证（空值验证、数据值格式验证），调用后端登录接口完成登录操作。如果登录时出错（验证码错误、账号或密码错误、其它错误等等）就提示用户，反之登录成功，然后结束战斗。

宽屏

窄屏

完成上面提到的需求之后，基本上一个登录界面算是比较完美了。但是为了有更好的体验，所以，我们现在需要更深入的去聊聊这个过程。

需求调研

1、用户如何操作登录界面

方式1：鼠标点击账号输入框，再次点击密码输入框以及验证码输入框输入相关信息，最后点击登录。

方式2：鼠标点击账号输入框，然后按Tab键到密码输入框，再次按Tab键到验证码输入框输入相关信息，最后按回车键登录。

方式3：在手机上操作时，点击账号输入框用html做登录界面好看，再次点击密码输入框以及验证码输入框输入相关信息，最后点击登录。

其它：当验证码不好辨别时，点击验证码重新获取。

2、前端脚本与服务端接口

a、账号或密码错误时，通常直接弹出一个提示，然后刷新验证码。

b、验证码错误与失效时，弹出一个提示，然后刷新验证码。

c、其它错误，弹出一个提示。

3、汇总用户操作

第一点中，用户需要鼠标操作，或者在手机上操作时，需要多次点击输入框。同时我们也知道，需要更便捷的使用某个软件或者系统，一定要知道他有哪些快捷键，这样我们才能更高效的使用这个软件或者系统。

第二点中，需要点击输入错误的输入框，当账号或密码错误时，用户需要检查账号，删除密码重新填写，以及重新填写验证码，然后登录。当验证码错误时，删除验证码重新填写，然后登录。

完成这一整套逻辑，您想象一下，用户是不是离开了键盘？所以这是我们今天要抛出的问题。

需求实现（全程键盘操作）

1、当用户进入登录界面时，直接将光标放到账号输入框，或者用户按下回车后再放入。

2、当用户在任何地方键入回车键时，哪一项为空，光标就放入哪一个输入框（手机上同样）。

3、当提示账号错误时，清空账号，刷新验证码，光标放入账号输入框。

4、当提示密码错误时，清空密码，刷新验证码，光标放入密码输入框。

5、当提示验证码错误时，清空验证码，光标放入验证码输入框。

6、当验证码不好辨别时，在验证码输入框中，随意输入一个字符，然后回车自动刷新验证码。

实现以上操作后，我们终于抛弃了鼠标，流畅的完成了登录操作。

npm包推荐

hotkeys-js

npm install hotkeys-js --save

hotkeys('enter', 'scope', function(){
  alert('您按下了回车键！');
});

人人为我，我为人人，一起加油吧。