解決需求的過程——發(fā)現(xiàn)問題
現(xiàn)在產(chǎn)品需求需要做一個ip輸入框UI組件啃奴，類似于windows中自帶的ipv4協(xié)議面板中ip輸入框控件。
創(chuàng)意來源于模仿，一切學(xué)習(xí)都是從模仿開始顾瞻。于是準(zhǔn)備模仿windows的做一個璃赡。
但是在研究過程中發(fā)現(xiàn)這樣一個情況：
①當(dāng)鼠標(biāo)聚焦在ip地址一欄第一個輸入框的時候，按鍵盤.會使得focus到第二個框并且如果第二個框有文字那么文字將被選中禁灼。
②當(dāng)此輸入框中的文字被選中時，再按.將不會聚焦下一個轿曙。
提出問題：選中文字我該如何去實現(xiàn)呢导帝？
分析問題
看很多技術(shù)博客守谓，重在闡述解決方案。當(dāng)然這無可厚非您单，過程反正已經(jīng)解決了何必關(guān)心細(xì)節(jié)呢斋荞，我只需要記錄下解決方案，下次再遇到的時候來查解決方案就好了虐秦。實際上平酿，解決問題、分析問題的過程要比最終解決問題的方案結(jié)果有價值得多悦陋。因為這里面你會發(fā)現(xiàn)很多牽連出來的新東西蜈彼。雖然這個過程對大多數(shù)博客閱讀者來說沒有什么意義。但是首先對于自己俺驶，其次對于那些希望欣賞探究過程的人來說是大有裨益的幸逆。
按.的時候?qū)嶋H上需要執(zhí)行如下邏輯：
當(dāng)鼠標(biāo)聚焦某輸入框并且按下鍵盤 . 的時候{
if(最后一個輸入框){
return;
}
if(本輸入框有被選中的部分){
return;
}
if(本輸入框無值){
return;
}else{
focus到下一個輸入框；
if(如果下一個輸入框有值){
下一個輸入框的所有值被選中暮现；
}
}
}
上面兩部分的難點在于：①如何判斷本輸入框有被選中的部分②如何實現(xiàn)下一個輸入框的所有值被選中还绘。
首先解決的是問題②
首先我在了解API的過程中發(fā)現(xiàn)了這樣一個API。HTMLInputElement.setSelectionRange()可以支持設(shè)置input元素的選中范圍送矩。比如從0到0蚕甥，從1到2等等。利用這個API我解決了第二個問題。【備注：后來發(fā)現(xiàn)更好的API是input.select()】
input.setSelectionRange(0,3)贫母；//左閉右開區(qū)間令哟，選中第1個到第三個字。
解決問題問題①的過程受阻
如何判斷本輸入框有本選中的部分。我第一個想到的就是window.getSelection();獲取當(dāng)前Selection對象。但是在火狐下測試選中input的文字竟然總是不正確。換了chrome瀏覽器發(fā)現(xiàn)可以正常獲取input中的選中文字呼伸。
遇到問題寫個測試DEMO
思考過程展示
色拉油老師老師曾經(jīng)說過，很多時候，開發(fā)老手都是憑著經(jīng)驗在使用API括享，實在不行才回去查API文檔搂根。一個是要求寫API的人寫出的API易于記憶，并且有對稱性比如set铃辖、get剩愧，遵循開發(fā)中常用的一些接口的名字。另一個是要求用API的人大膽嘗試敢于揣測娇斩，在使用中發(fā)現(xiàn)問題仁卷，反哺API開發(fā)中的不足。一開始我以為既然有HTMLInputElement.setSelectionRange想當(dāng)然的大膽嘗試getSelectionRange犬第，結(jié)果發(fā)現(xiàn)沒有這個方法锦积。那我繼續(xù)查API，后來饑人谷大群里有消息告訴我firefox中用window.getSelection()無法檢測到input中的selection對象是firefox的bug歉嗓。用HTMLInputElement.selectionStart和HTMLInputElement.selectionEnd丰介。好吧只怪我查HTMLInputElement.setSelectionRange API的時候沒有仔細(xì)看，實際上人家有提到這兩個API鉴分。
至此我終于知道firefox如何查看input的selection對象了基矮。實際上是查不出來selection對象的firefox自身根本不支持。但是我們可以用HTMLInputElement.selectionStart冠场，HTMLInputElement.selectionEnd來曲線救國達(dá)到我們想要的。
知識補(bǔ)充：selection對象
Selection對象一般由window.getSelection()
或其他方法產(chǎn)生碴裙。它代表頁面中的文本選區(qū)，可能橫跨多個元素点额。文本選區(qū)由用戶拖拽鼠標(biāo)經(jīng)過文字而產(chǎn)生舔株。
參考鏈接
接下來值得思考的問題
js如何控制光標(biāo)移動呢？因為看到windows的ip輸入框按↑可以達(dá)到→的目的还棱，怎么實現(xiàn)呢载慈？
