如果讓您實作一個普通的登入界面，您會如何做？
通常做法
一般情況，我們會根據UI設計師的設計稿，去适配通路裝置的螢幕尺寸，加入必要的表單驗證（空值驗證、資料值格式驗證），調用後端登入接口完成登入操作。如果登入時出錯（驗證碼錯誤、賬号或密碼錯誤、其它錯誤等等）就提示使用者，反之登入成功，然後結束戰鬥。
寬屏
窄屏
完成上面提到的需求之後，基本上一個登入界面算是比較完美了。但是為了有更好的體驗，是以，我們現在需要更深入的去聊聊這個過程。
需求調研
1、使用者如何操作登入界面
方式1：滑鼠點選賬号輸入框，再次點選密碼輸入框以及驗證碼輸入框輸入相關資訊，最後點選登入。
方式2：滑鼠點選賬号輸入框，然後按Tab鍵到密碼輸入框，再次按Tab鍵到驗證碼輸入框輸入相關資訊，最後按Enter鍵登入。
方式3：在手機上操作時，點選賬号輸入框，再次點選密碼輸入框以及驗證碼輸入框輸入相關資訊，最後點選登入。
其它：當驗證碼不好辨識時，點選驗證碼重新擷取。
2、前端腳本與服務端接口
a、賬号或密碼錯誤時，通常直接彈出一個提示，然後重新整理驗證碼。
b、驗證碼錯誤與失效時，彈出一個提示，然後重新整理驗證碼。
c、其它錯誤，彈出一個提示。
3、彙總使用者操作
第一點中，使用者需要滑鼠操作，或者在手機上操作時，需要多次點選輸入框。同時我們也知道，需要更便捷的使用某個軟體或者系統，一定要知道他有哪些快捷鍵，這樣我們才能更高效的使用這個軟體或者系統。
第二點中，需要點選輸入錯誤的輸入框，當賬号或密碼錯誤時，使用者需要檢查賬号，删除密碼重新填寫，以及重新填寫驗證碼，然後登入。當驗證碼錯誤時，删除驗證碼重新填寫，然後登入。
完成這一整套邏輯，您想象一下，使用者是不是離開了鍵盤？是以這是我們今天要抛出的問題。
需求實作（全程鍵盤操作）
1、當使用者進入登入界面時，直接将光标放到賬号輸入框，或者使用者按下回車後再放入。
2、當使用者在任何地方鍵入Enter鍵時，哪一項為空，光标就放入哪一個輸入框（手機上同樣）。
3、當提示賬号錯誤時，清空賬号，重新整理驗證碼，光标放入賬号輸入框。
4、當提示密碼錯誤時，清空密碼，重新整理驗證碼，光标放入密碼輸入框。
5、當提示驗證碼錯誤時，清空驗證碼，光标放入驗證碼輸入框。
6、當驗證碼不好辨識時，在驗證碼輸入框中，随意輸入一個字元，然後回車自動重新整理驗證碼。
實作以上操作後，我們終于抛棄了滑鼠，流暢的完成了登入操作。
npm包推薦
hotkeys-js
npm install hotkeys-js --save hotkeys('enter', 'scope', function(){
alert('您按下了Enter鍵！');
}); 人人為我，我為人人，一起加油吧。