如果選擇用一段話來概括這篇文章，那可能是這樣的。
有時(shí)候做一個(gè)東西的時(shí)候潛意識地覺得自己沒做過，不熟悉，然后就立馬打開 Chrome 去搜，然而不巧網(wǎng)上的這方面的答案都隨波逐流走偏了，看似完美的實(shí)現(xiàn)了，實(shí)際背后埋藏著很大的坑，但匆匆一看，這就是你想要的，這時(shí)候，你的思路也就潛移默化地被帶偏了。
但當(dāng)你泡好了茶，認(rèn)真測試的時(shí)候，才發(fā)現(xiàn)，我靠，怎么會有個(gè) Bug，一陣抓狂之后就開始想著怎么填上這個(gè)坑，于是一套自己認(rèn)為可以完美修復(fù)并且對用戶友好的方案就出來了，但當(dāng)你再次準(zhǔn)備好一切，正想怎么去實(shí)現(xiàn)它的時(shí)候，無意間隨手又試了試一個(gè)自己的想法，剎那間，什么都不一樣了，就多想了那么一一點(diǎn)點(diǎn) 才發(fā)現(xiàn)自己很容易就能解決那個(gè)問題，根本不用什么自己覺得復(fù)雜而且對用戶友好的設(shè)計(jì)，最后就剩吐槽網(wǎng)上的答案了。
想如果你還感興趣，那就繼續(xù)滑吧。
想必你應(yīng)該對這樣一個(gè)功能并不陌生。
可能你會想說這個(gè)問題不是很簡單嗎，沒錯(cuò)，我當(dāng)時(shí)也這樣想，實(shí)際做完后才發(fā)現(xiàn)，它是真的簡單。
大體的思路：對于自動(dòng) focus on 下一個(gè)輸入框，監(jiān)聽 input 的事件，在用戶輸入滿足校驗(yàn)條件以及限定的位數(shù)的時(shí)候，獲取下一個(gè)應(yīng)該給聚焦的元素，然后調(diào)用 focus 方法。
然后對于這個(gè)需要監(jiān)聽的 input 事件，想都沒想，就打開 Chrome了，連續(xù)看了四五六七八個(gè)解決方案，一致地推薦 onKayUp 是個(gè)完美的解決方案。
測試完畢，欣喜，提交。
然鵝，當(dāng)我輸完第三個(gè)，我想直接回去修改上一個(gè)，才發(fā)現(xiàn) Shift tab 根本回不去，如果想硬回，要不上鼠標(biāo)，要不同時(shí)按個(gè) Shift Tab Space 鍵。
像這樣：
然后第一反應(yīng)是去網(wǎng)上試了五六七八個(gè)推薦用法的 Demo，原來都有這個(gè)問題，What？這些人都不修的嗎，終于找到一個(gè)Shift Tab 可以回去的，看了下描述，是用了一個(gè) Toggle 來控制 自動(dòng)跳轉(zhuǎn)的功能會不會被啟用。
仔細(xì)又測了一波，發(fā)現(xiàn) Tab 的時(shí)候也有同樣道理的問題，如果我現(xiàn)在從第一個(gè)填到了最后一個(gè)，這時(shí)候發(fā)現(xiàn)都填的不對，但我就是想從第一個(gè)iput 開始修改，這時(shí)候 Shift Tab 是回不去的，無奈，用鼠標(biāo)點(diǎn)擊了第一個(gè)input，修改完后，心想跳到第二個(gè)應(yīng)該就可以再改了，然鵝，它直接給我跳轉(zhuǎn)到了第三個(gè)。
我在想，幸好，我這只有三個(gè) input需要實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn)，如果有七八九十個(gè)，那還不得給用戶表演個(gè)一系列跳轉(zhuǎn)動(dòng)畫？
然后，就在這個(gè)坑里掙扎，想著要怎么跳出去呢，是不是需要監(jiān)聽用戶使用了 Shift 還是 Shift Tab 還是鼠標(biāo)呀，你根本不知道用戶是怎么樣在你的頁面點(diǎn)點(diǎn)點(diǎn)一通的。
冷靜下，仔細(xì)思考下怎么樣才能盡可能地讓用戶收益于這個(gè)自動(dòng)跳轉(zhuǎn)功能，還不會被它帶來的副作用 block 呢。
于是，就有了這樣一張圖，還和其他同事討論了一下這方案，都覺得可行，雖然看著有點(diǎn)略復(fù)雜，但這個(gè)問題百分百是要修的。
當(dāng)做好所有準(zhǔn)備，開始按這樣實(shí)現(xiàn)的時(shí)候。
想了一個(gè)問題，onKeyUp才是罪魁禍?zhǔn)籽剑?dāng)Shift Tab 按下的時(shí)候，就是因?yàn)橛|發(fā)了 keyUp 事件，所有根本跳不回去。我為什么不用 onChange？
冷靜了1分鐘，我為什么不用 onChange，？竟半天想不出答案。
實(shí)錘了一波，簡直完美。這里有 Demo，感興趣可以點(diǎn)一點(diǎn)，哈哈。
還想了想這樣用是不是有什么別的坑，因?yàn)榘俜种攀诺拇鸢付际?onKeyUp。 但我想說，真的是不對的，要不是賬號有經(jīng)驗(yàn)限制，真想每個(gè)都評論一遍問下作者這個(gè)問題。
其實(shí)一開始真的覺得很浪費(fèi)時(shí)間，自己干嘛不多想那么一下，如果一開始沒有去搜，直接用了 onChange，是不是就根本沒有這個(gè)問題，但換了個(gè)思路想，如果沒有搜，也不會知道網(wǎng)上的這些一模一樣所謂正確的答案原來都是有問題的，那也就不會有坐在這里一字一句地把件事情記錄下來，讓更多的人意識到這個(gè)問題，也提醒自己以后不要犯類似的錯(cuò)誤。
也許，這就是生活吧。
少走了彎路，也就錯(cuò)過了風(fēng)景。
