在输入框的光标处插入内容

Frank
  • 开发笔记
  • JS
小于 1 分钟约 218 字...

在输入框的光标处插入内容

//在光标处插入文字   field为文本框的DOM元素,value要插入的字符
function insertText(field, value) {
  const startPos = field.selectionStart
  const endPos = field.selectionEnd
  // 保存光标所在处滚动高度
  const restoreTop = field.scrollTop
  field.value =
    field.value.substring(0, startPos) +
    value +
    field.value.substring(endPos, field.value.length)
  field.focus()
  // 让文本域卷动高度保持在光标所在处
  field.scrollTop = restoreTop
  field.selectionStart = startPos + value.length
  field.selectionEnd = startPos + value.length
}

示例

See the Pen by zhangfanhang on CodePen.

说明

HTMLTextAreaElementopen in new window

  • selectionStart返回/设置所选文本开头的索引。如果未选择文本,则返回光标后面的字符的索引。

  • selectionEnd返回/设置所选文本结尾的索引。如果未选择文本,则返回光标后面的字符的索引。

未选择文本,两个属性的值相同

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1