解决需求的过程——发现问题
现在产品需求需要做一个ip输入框UI组件，类似于windows中自带的ipv4协议面板中ip输入框控件。
创意来源于模仿，一切学习都是从模仿开始。于是准备模仿windows的做一个。
但是在研究过程中发现这样一个情况：
①当鼠标聚焦在ip地址一栏第一个输入框的时候，按键盘.会使得focus到第二个框并且如果第二个框有文字那么文字将被选中。
②当此输入框中的文字被选中时，再按.将不会聚焦下一个。
提出问题：选中文字我该如何去实现呢？
分析问题
看很多技术博客，重在阐述解决方案。当然这无可厚非，过程反正已经解决了何必关心细节呢，我只需要记录下解决方案，下次再遇到的时候来查解决方案就好了。实际上，解决问题、分析问题的过程要比最终解决问题的方案结果有价值得多。因为这里面你会发现很多牵连出来的新东西。虽然这个过程对大多数博客阅读者来说没有什么意义。但是首先对于自己，其次对于那些希望欣赏探究过程的人来说是大有裨益的。
按.的时候实际上需要执行如下逻辑：
当鼠标聚焦某输入框并且按下键盘 . 的时候{
if(最后一个输入框){
return;
}
if(本输入框有被选中的部分){
return;
}
if(本输入框无值){
return;
}else{
focus到下一个输入框；
if(如果下一个输入框有值){
下一个输入框的所有值被选中；
}
}
}
上面两部分的难点在于：①如何判断本输入框有被选中的部分②如何实现下一个输入框的所有值被选中。
首先解决的是问题②
首先我在了解API的过程中发现了这样一个API。HTMLInputElement.setSelectionRange()可以支持设置input元素的选中范围。比如从0到0，从1到2等等。利用这个API我解决了第二个问题。【备注：后来发现更好的API是input.select()】
input.setSelectionRange(0,3)；//左闭右开区间，选中第1个到第三个字。
解决问题问题①的过程受阻
如何判断本输入框有本选中的部分。我第一个想到的就是window.getSelection();获取当前Selection对象。但是在火狐下测试选中input的文字竟然总是不正确。换了chrome浏览器发现可以正常获取input中的选中文字。
遇到问题写个测试DEMO
思考过程展示
色拉油老师老师曾经说过，很多时候，开发老手都是凭着经验在使用API，实在不行才回去查API文档。一个是要求写API的人写出的API易于记忆，并且有对称性比如set、get，遵循开发中常用的一些接口的名字。另一个是要求用API的人大胆尝试敢于揣测，在使用中发现问题，反哺API开发中的不足。一开始我以为既然有HTMLInputElement.setSelectionRange想当然的大胆尝试getSelectionRange，结果发现没有这个方法。那我继续查API，后来饥人谷大群里有消息告诉我firefox中用window.getSelection()无法检测到input中的selection对象是firefox的bug。用HTMLInputElement.selectionStart和HTMLInputElement.selectionEnd。好吧只怪我查HTMLInputElement.setSelectionRange API的时候没有仔细看，实际上人家有提到这两个API。
至此我终于知道firefox如何查看input的selection对象了。实际上是查不出来selection对象的firefox自身根本不支持。但是我们可以用HTMLInputElement.selectionStart，HTMLInputElement.selectionEnd来曲线救国达到我们想要的。
知识补充：selection对象
Selection对象一般由window.getSelection()
或其他方法产生。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。
参考链接
接下来值得思考的问题
js如何控制光标移动呢？因为看到windows的ip输入框按↑可以达到→的目的，怎么实现呢？
