前端在優化使用者體驗的時候，經常會遇到這樣的需求：

當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)