文本框光标处插入数据的方法

在 React 项目中遇到一个需求，点击 tags 后插入进正在编辑的 textarea 中。

在翻阅了一些网上的答案后发现基本上都在围绕 setSelectionRange 展开，然而我并不想选中啊，好吧，没有耐心再去找了。自己再去尝试下，每次把光标移出文本框后通过控制台 focus 会发现光标依旧定位在移出时的位置，再联系上面的 api，让我意识到 input 是存在一个记录光标位置的类似属性的。在控制台直接打印出 input，寻寻觅觅发现了神奇的东西 selectionStart 和 selectionEnd。修改相应的值，发现两值不一样时会选中区间内的文本，再次 focus 也就是定位到了可以修改这个选中值的地方了，完美~

因此通过修改当前文本框的 selectionStart 和 selectionEnd 即可自定义 focus 的光标位置了。下面是示例代码：

<textarea id="textarea" rows="5" cols="50"></textarea>
<button id="button">插入一个随机值</button>

var textarea = document.getElementById('textarea')
var button = document.getElementById('button')

button.addEventListener('click', () => {
  var value = textarea.value.split('')
  var pos = textarea.selectionStart
  // 光标处插入 4 位数随机值
  var insertValue = `{{${Math.random().toString().slice(2, 6)}}}`
  value.splice(pos, 0, insertValue)
  textarea.value = value.join('')
  // 定位新的光标位置
  textarea.selectionStart = textarea.selectionEnd = pos + insertValue.length
  textarea.focus()
}, false)

最后，我们的项目使用了 antd，对文本框使用 setFieldsValue 赋值，这时候需要注意异步的问题，可以使用 setTimeout(func, 0) 来解决。