代码展示
//html
<body>
<input type="text" id="input">
<button onclick="insert(1)">插入</button>
</body>
//js
var input = document.getElementById("input");
var rangeIndex=null//光标位置
//监听失焦
input.onblur = function(){
rangeIndex = this.selectionStart;//获取失焦时光标的位置
}
//插入函数
function insert(text){
if(rangeIndex){
let oldVaue = input.value;
input.value = oldVaue.slice(0,rangeIndex)+text+oldVaue.slice(rangeIndex);
rangeIndex = rangeIndex+text.toString().length;
}else{
input.value+=text;
rangeIndex=input.value.length;
}
input.focus();
input.setSelectionRange(rangeIndex,rangeIndex)//重新定位光标
}
HTMLInputElement.selectionStart和HTMLInputElement.selectionEnd获取光标在<input> 或 <textarea> 元素中的位置(索引值)
HTMLInputElement.setSelectionRange
HTMLInputElement.setSelectionRange 方法用于设定<input> 或 <textarea> 元素中当前选中文本的起始和结束位置。
element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
参数
如果 selectionEnd 小于 selectionStart,则二者都会被看作 selectionEnd。
selectionStart
被选中的第一个字符的位置索引,从0开始。如果这个值比元素的 value 长度还大,则会被看作 value 最后一个位置的索引。
selectionEnd
被选中的最后一个字符的 下一个 位置索引。如果这个值比元素的value长度还大,则会被看作value最后一个位置的索引。
selectionDirection 可选
一个表示选择方向的字符串,可能的值有:
"forward"
"backward"
"none" 默认值,表示方向未知或不相关。
如果你希望全选输入元素中的文本,你可以使用 HTMLInputElement.select() 方法。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。