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记录结束位置

文本框的值改变后要再新值的基础上来控制光标位置

原文地址：https://www.cnblogs.com/skylen/p/9337612.html