效果类似输入法，点击插入按钮，在文本框中的当前位置，插入一对括号，然后让光标停留在光标中，方便用户输入。

点击插入括号
请在这里输入内容...

遇到两个问题：一是任意位置插入怎么计算当前位置？另外一个是要怎么把光标 focus 在刚刚插入的这对括号（）中间位置？

不需要计算位置，监听输入事件，当左括号按下的时候，自动补充右括号，然后自动按一次←左键即可。

我记得 Range 对象可以做这个。楼主可以搜一下

先 mark，有时间再看。

从交互上讲不建议这么做，并不符合输入的预期，会给用户带来困扰（个别输入法自作多情而已）
实现的话，可以考虑劫持某个输入事件，判断最后输入的两个字符，如果是一对括号，则多补一个左箭头


插入
let input = document.querySelector('input')
let btn = document.querySelector('button')
let selectionStart;
input.addEventListener('blur', function(event) {
selectionStart = input.selectionStart;
})
btn.addEventListener('click', function(event) {
if (!selectionStart) {
return;
}
input.value = input.value.slice(0, selectionStart)
+ '()'
+ input.value.slice(selectionStart);
input.focus();
input.selectionStart = selectionStart + 1;
input.selectionEnd = selectionStart + 1;
})

牛批！

很赞！楼很精炼，其他地方的实现都比这个啰嗦

出现一个疑问：我把上面 JS 部分放进一个 onclick() 函数之后，反复点两三次，就会一次会插入多个双括号。这是什么原因导致的？
JS 部分的代码没改动，只是放进了一个 onclick="addBrackets()" 中，就会出现插入多个双括号的情况：

插入