代码展示

 //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() 方法。


star
64 声望3 粉丝

小菜鸟成长记录