用户登录界面(用户登录界面html)

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

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

宽屏

窄屏

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

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

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

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

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

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

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

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

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

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

3、汇总用户操作

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

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

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

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

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

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

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

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

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

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

hotkeys-js

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