firefox中如何查看input的selection对象

解决需求的过程——发现问题

现在产品需求需要做一个ip输入框UI组件，类似于windows中自带的ipv4协议面板中ip输入框控件。

windows自带的ip输入框组件

但是在研究过程中发现这样一个情况：
①当鼠标聚焦在ip地址一栏第一个输入框的时候，按键盘.会使得focus到第二个框并且如果第二个框有文字那么文字将被选中。
②当此输入框中的文字被选中时，再按.将不会聚焦下一个。

关键词：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

请戳这里：请在firefox和chrome浏览器中分别测试

思考过程展示

色拉油老师老师曾经说过，很多时候，开发老手都是凭着经验在使用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来曲线救国达到我们想要的。

漏掉的API：selectionStart，selectionEnd

知识补充：selection对象

Selection对象一般由window.getSelection()
或其他方法产生。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。

参考链接

• document.getSelection() in textarea empty (Firefox only)

接下来值得思考的问题

js如何控制光标移动呢？因为看到windows的ip输入框按↑可以达到→的目的，怎么实现呢？