在「The UX of login codes」這篇看到的，講的是 one-time password 的輸入設計問題：
這東西超多 designer 喜歡用，但對於 user experience (UX) 以及資安角度來說都很差。
先從 UX 的部分來說，現有的實作都無法直接貼上，所以就得背下來輸入，這點在手機上面特別麻煩：
Can’t copy-and-paste the code – This happened to me twice today, which is what prompted this little grumbly post. The lack of copy and paste results in this awful dance of switching between apps while trying to hold random digits in your head. Woof.
在產品考量的面向，因為沒有處理 Paste 的事件，所以就無法設計的太長以及用到複雜的字元 (以增加猜測的難度)，導致安全性的下降，這點在「How long should 2 factor authentication codes be?」這邊的討論有計算過：
- 只有四碼數字的話 (萬種組合) 允許三次猜測，只需要 231 個帳號就有 50% 的機會掃到一個。
- 但如果是六碼數字的話 (百萬種組合) 允許三次猜測，會需要 231049 個帳號才會超過 50% 的機會。
而且這點在很久前就是可行的方法了，有人就用這個方法打 Facebook 的 recovery 機制 (透過簡訊六碼)：「大量破解 Facebook 帳號的方法」，後來 Facebook 有加上一些反制措施。
另外對於前端開發的面向，要達到這樣的 input box 效果，沒辦法使用一個 input 加上 css 達成，需要六個 input，這導致後續有很多實作得補：
- 輸入完一個後要跳位置。(幾乎都有做到，但都會閃爍)
- 傳到後端 API 前要組合六個欄位。(幾乎都有做到)
- 處理 Backspace。(幾乎都沒做到)
- 處理 Paste 事件。(幾乎都沒做到)
這是在實作都很好的情況下，但現實中會遇到很多實作上的 bug...
像是因為幾乎都沒有支援 Backspace 的修正，所以遇到你因為輸入錯誤如果想用 Shift-Tab 往前一格修正，卻被 javascript 事件抓到而把你往下一格丟，逼你一定要用滑鼠去點上一格。
還有用 setInterval() 之類的方式在檢查的，所以你輸入太快會造成 input 裡面有兩個字 (沒設定 maxlength) 或是被吃掉 (有設定 maxlength)，然後慢慢的跳到下一格。
比較好的設計是讓手機可以偵測到 login code 自動複製/貼上，這樣在桌機時也可以複製/貼上，然後長度可以拉到七碼或是更長。
然後你回頭就發現用最原始的 input 就可以做到了，也不用 javascript...