关于javascript:input光标插入文字实现

7次阅读

共计 1144 个字符，预计需要花费 3 分钟才能阅读完成。

 //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 办法用于设定 <input> 或 <textarea> 元素中以后选中文本的起始和完结地位。

element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);

如果 selectionEnd 小于 selectionStart，则二者都会被看作 selectionEnd。
selectionStart
被选中的第一个字符的地位索引，从 0 开始。如果这个值比元素的 value 长度还大，则会被看作 value 最初一个地位的索引。
selectionEnd
被选中的最初一个字符的下一个地位索引。如果这个值比元素的 value 长度还大，则会被看作 value 最初一个地位的索引。
selectionDirection 可选
一个示意抉择方向的字符串，可能的值有：
“forward”
“backward”
“none” 默认值，示意方向未知或不相干。

如果你心愿全选输出元素中的文本，你能够应用 HTMLInputElement.select() 办法。

正文完