代码展现
//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() 办法。