avatar 奔跑的Q丶

主题凑合用,样式即将改版...

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

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

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

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

1
2
<textarea id="textarea" rows="5" cols="50"></textarea>
<button id="button">插入一个随机值</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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) 来解决。