js手動控制輸入框的光標位置

功能：點擊外部可選項將文字帶入，並且光標在上一次位置后（類似於手機鍵盤點擊）

兩種場景：

　　1. 焦點沒有進入文本框或者在文本框中最后，點擊外部之后直接將內容加到后面然后跟上光標；

　　　　注：光標位置可能和焦點位置不一致，光標最多只能靠近右邊框，

　　2.焦點在文本框且光標在已有文本的中間，例123，在1后，加入4后顯示1423並且光標在4后；

 

在此展示我用的項目代碼（angular的動態表單中）

  getConputation(item) {
    const formModel = this.formModel.value['rule_result4']; // 控制器中有文本框現在的內容
    const value = '{' + item['name'] + '}'; // 要添加的內容
    const element = $('#calculate input')[0]; // 輸入框對象
    const newValLeft = formModel.substring(0, element.selectionStart); // 拼接，新值的左邊
    const newValRight = formModel.substring(element.selectionStart, formModel.length);  // 拼接，新值的右邊
    const newValue = newValLeft + value + newValRight; // 將新值左邊、插入值、右邊拼接在一起
    const newLocation = element.selectionStart + value.length; // 光標新的位置（以前的位置加上插入值的長度）
    this.formModel.patchValue({ 'rule_result4': newValue }); // 給該文本框賦新值
    this.addRange(newLocation, newValue, element);  // 控制光標位置
  }
  // 控制光標位置
  addRange(newLocation, newValue, element) {
    element.value = newValue; // 更新輸入框的值
    element.focus(); // 輸入框獲取焦點，但當文本過長的時候文本最后和光標不一同顯示在輸入框右邊，而是隱藏起來了
    element.selectionStart = element.selectionEnd  = newLocation; // 更新光標位置，將之前算的新位置給輸入框光標
　}

講解：Selection對象表示用戶選擇的文本范圍或插入符號的當前位置。要獲取用於檢查或修改的Selection對象，請使用window.getSelection()

selectionSatrt記錄上一次的開始位置，selectionEnd記錄結束位置

文本框的值改變后要再新值的基礎上來控制光標位置