利用selection对象在textarea光标处插入指定文本

最近项目中需要做一个效果：在文本框中光标处输入指定的文本。这里就需要用到selection对象。网上查了资料，看了mdn，发现知识点有点乱，这边先写下我这次用到的几个

• 兼容性
  <= IE10:
  document.selection,返回的是当前文档选中的内容，目前这个api只有ie10以下支持，相关的方法如下：

  clear　清除选中的内容
  empty　取消选中
  createRange　返回 TextRange 或 ControlRange 对象
  > IE11 and Others:
  window.getSelection(),返回的是selection对象，就我目前的了解，通过这个对象并不能改变选中的文本内容，或者需要用到更加复杂的方式解决，所以这次没用到这个api，而是通过textarea元素节点的selectionStart以及selectionEnd属性

• 相关实现代码

/**
 * @param {node} f -textarea节点
 * @param {string} value -需要插入的值
 * @param {func} callback -回调函数
*/
export function insertAtCursor(f, value, callback) {
    /* eslint-disable */
  let field = f
  let newValue = ''
  // IE support
  if (document.selection) {
    field.focus()
    const sel = document.selection.createRange()
    sel.text = newValue = value
    sel.select()
  } else if (field.selectionStart || field.selectionStart === 0) {
    const startPos = field.selectionStart
    const endPos = field.selectionEnd
    const restoreTop = field.scrollTop
    newValue = field.value.substring(0, startPos) +
               value +
               field.value.substring(endPos, field.value.length)
    if (restoreTop > 0) {
      field.scrollTop = restoreTop
    }
    field.focus()
    setTimeout(() => {
      field.selectionStart = startPos + value.length
      field.selectionEnd = startPos + value.length      
    }, 0)
  } else {
    newValue = field.value + value
    field.focus()
  }
  callback(newValue)
}

• 踩过的坑
  这次是用react开发的，在代码执行(field.selectionStart || field.selectionStart === 0)这个条件时，发现每次插入文本之后，textarea的光标总是会定位到文本的最后，排查了很久，我觉得原因是这样的，当执行

      field.selectionStart = startPos + value.length
      field.selectionEnd = startPos + value.length

这段语句之前，react并还没有渲染，等于说react渲染之后，你之前设置的光标位置都会被重新定位到最后，这可怎么办呢，于是我把这两句写在了setTimeout定时里面，并且设置执行时机为0，作用是让这段代码在下一个Event loop之前执行，保证在react渲染成功之后执行，关于任务的执行顺序，这里附上简单的一个截图，详见阮一峰老师的教程——定时器