js在输入框光标位置插入内容

2019.01.03 17:36 阅读 286

在写for-editor编辑器的时候,用到了快捷插入标签功能,需要在光标位置插入内容。主要用到的是dom节点的selectionStartselectionEnd属性。

function insertAtCursor(el, insertValue) {
  if (el.selectionStart || el.selectionStart == '0') {
    // 获取光标目前选中的开始位置和结束位置
    var startPos = el.selectionStart
    var endPos = el.selectionEnd

    // 保存滚动条
    var restoreTop = el.scrollTop

    // 插入内容
    el.value = el.value.substring(0, startPos) + insertValue + el.value.substring(endPos, el.value.length)

    // 恢复滚动条位置
    if (restoreTop > 0) {
      el.scrollTop = restoreTop
    }

    // 恢复焦点
    el.focus()

    // 恢复光标位置
    el.selectionStart = startPos + insertValue.length
    el.selectionEnd = startPos + insertValue.length
  } else {
    el.value += insertValue
    el.focus()
  }
}

其中el为插入文本的dom元素,insertValue为要插入的内容。

<textarea id="textarea" style="width: 400px; height: 200px">
</textarea>
<input type="text" id="text" />
<input type="button" value="插入" onclick="insertAtCursor(document.getElementById('textarea'),document.getElementById('text').value)" />