如果選擇用一段話來概括這篇文章缨硝，那可能是這樣的芋簿。
有時候做一個東西的時候潛意識地覺得自己沒做過，不熟悉，然后就立馬打開 Chrome 去搜骏全，然而不巧網(wǎng)上的這方面的答案都隨波逐流走偏了苍柏，看似完美的實現(xiàn)了，實際背后埋藏著很大的坑姜贡，但匆匆一看试吁，這就是你想要的，這時候楼咳，你的思路也就潛移默化地被帶偏了熄捍。
但當你泡好了茶，認真測試的時候母怜，才發(fā)現(xiàn)余耽，我靠，怎么會有個 Bug苹熏，一陣抓狂之后就開始想著怎么填上這個坑宾添，于是一套自己認為可以完美修復并且對用戶友好的方案就出來了，但當你再次準備好一切柜裸，正想怎么去實現(xiàn)它的時候缕陕，無意間隨手又試了試一個自己的想法，剎那間疙挺，什么都不一樣了扛邑，就多想了那么一一點點 才發(fā)現(xiàn)自己很容易就能解決那個問題，根本不用什么自己覺得復雜而且對用戶友好的設(shè)計铐然，最后就剩吐槽網(wǎng)上的答案了蔬崩。
想如果你還感興趣，那就繼續(xù)滑吧搀暑。
想必你應該對這樣一個功能并不陌生沥阳。
可能你會想說這個問題不是很簡單嗎，沒錯自点，我當時也這樣想桐罕，實際做完后才發(fā)現(xiàn)，它是真的簡單桂敛。
大體的思路：對于自動 focus on 下一個輸入框功炮，監(jiān)聽 input 的事件，在用戶輸入滿足校驗條件以及限定的位數(shù)的時候术唬，獲取下一個應該給聚焦的元素薪伏，然后調(diào)用 focus 方法。
然后對于這個需要監(jiān)聽的 input 事件粗仓，想都沒想嫁怀，就打開 Chrome了设捐，連續(xù)看了四五六七八個解決方案，一致地推薦 onKayUp 是個完美的解決方案塘淑。
測試完畢萝招，欣喜，提交朴爬。
然鵝即寒，當我輸完第三個，我想直接回去修改上一個召噩，才發(fā)現(xiàn) Shift tab 根本回不去母赵，如果想硬回，要不上鼠標具滴，要不同時按個 Shift Tab Space 鍵凹嘲。
像這樣：
然后第一反應是去網(wǎng)上試了五六七八個推薦用法的 Demo，原來都有這個問題构韵，What周蹭？這些人都不修的嗎，終于找到一個Shift Tab 可以回去的疲恢，看了下描述凶朗，是用了一個 Toggle 來控制 自動跳轉(zhuǎn)的功能會不會被啟用。
仔細又測了一波显拳，發(fā)現(xiàn) Tab 的時候也有同樣道理的問題棚愤，如果我現(xiàn)在從第一個填到了最后一個，這時候發(fā)現(xiàn)都填的不對杂数，但我就是想從第一個iput 開始修改宛畦，這時候 Shift Tab 是回不去的，無奈揍移，用鼠標點擊了第一個input次和，修改完后，心想跳到第二個應該就可以再改了那伐，然鵝踏施，它直接給我跳轉(zhuǎn)到了第三個。
我在想喧锦，幸好读规，我這只有三個 input需要實現(xiàn)自動跳轉(zhuǎn)，如果有七八九十個燃少，那還不得給用戶表演個一系列跳轉(zhuǎn)動畫？
然后铃在，就在這個坑里掙扎阵具，想著要怎么跳出去呢碍遍，是不是需要監(jiān)聽用戶使用了 Shift 還是 Shift Tab 還是鼠標呀，你根本不知道用戶是怎么樣在你的頁面點點點一通的阳液。
冷靜下怕敬，仔細思考下怎么樣才能盡可能地讓用戶收益于這個自動跳轉(zhuǎn)功能，還不會被它帶來的副作用 block 呢帘皿。
于是东跪，就有了這樣一張圖，還和其他同事討論了一下這方案鹰溜，都覺得可行虽填，雖然看著有點略復雜，但這個問題百分百是要修的曹动。
當做好所有準備斋日，開始按這樣實現(xiàn)的時候。
想了一個問題墓陈，onKeyUp才是罪魁禍首呀恶守，當Shift Tab 按下的時候，就是因為觸發(fā)了 keyUp 事件贡必，所有根本跳不回去兔港。我為什么不用 onChange？
冷靜了1分鐘仔拟，我為什么不用 onChange衫樊，？竟半天想不出答案理逊。
實錘了一波橡伞，簡直完美。這里有 Demo晋被，感興趣可以點一點兑徘，哈哈。
還想了想這樣用是不是有什么別的坑羡洛，因為百分之九十九的答案都是 onKeyUp挂脑。 但我想說，真的是不對的欲侮，要不是賬號有經(jīng)驗限制崭闲，真想每個都評論一遍問下作者這個問題。
其實一開始真的覺得很浪費時間威蕉，自己干嘛不多想那么一下刁俭，如果一開始沒有去搜，直接用了 onChange韧涨，是不是就根本沒有這個問題牍戚，但換了個思路想侮繁，如果沒有搜，也不會知道網(wǎng)上的這些一模一樣所謂正確的答案原來都是有問題的如孝，那也就不會有坐在這里一字一句地把件事情記錄下來宪哩，讓更多的人意識到這個問題，也提醒自己以后不要犯類似的錯誤第晰。
也許锁孟，這就是生活吧。
少走了彎路茁瘦，也就錯過了風景品抽。
