功能：点击外部可选项将文字带入，并且光标在上一次位置后（类似于手机键盘点击）
两种场景：
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记录结束位置
文本框的值改变后要再新值的基础上来控制光标位置
js手动控制输入框的光标位置
原文地址：https://www.cnblogs.com/skylen/p/9337612.html