前端在优化用户体验的时候，经常会遇到这样的需求：

当input框有值的时候，用户再去编辑这个input，无论用户点input的什么位置，总是将光标置于input已有内容的最末端。

下例是基于vue框架的写法：

<input type="text" @click="focusEnd('name-inp-hook')" class="name-inp" id="name-inp-hook" v-model="data.name" @input="onInput" @focus="inputFocus" @blur="inputBlur" maxlength="15" placeholder="请输入姓名"/>

methods: {
  focusEnd (id) {
      var inpEl = document.getElementById(id)
      inpEl.focus()
      var length = inpEl.value.length
      if (document.selection) {
        var range = inpEl.createTextRange()
        range.moveStart('character', length)
        range.collapse()
        range.select()
      } else if (typeof inpEl.selectionStart === 'number' && typeof inpEl.selectionEnd === 'number') { // selectionStart和selectionEnd两个属性是当前选中文本起始位置的索引
        inpEl.selectionStart = inpEl.selectionEnd = length
      }
    }
}

说明：

range = document.createRange()  // 创建一个Range对象

// 一旦一个 Range 对象被建立，在使用他的大多数方法之前需要去设置他的临界点。

range.setStart(startNode, startOffset)
range.setEnd(endNode, endOffset)