JS 在文本框任意位置插入一对括号，怎么能让光标停留在括号中间？

[lisisi]

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

<a class="btn" onclick="addBrackets()">点击插入括号</a>
<textarea id="objText">请在这里输入内容...</textarea>

<script type="text/javascript">
    function addBrackets(){
        var obj = document.getElementById('objText');
        obj.value = obj.value + "()";
        obj.focus();
    }
</script>

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

[fancy111]

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

[IsaacYoung]

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

[15651980765]

先 mark，有时间再看。

[learnshare]

从交互上讲不建议这么做，并不符合输入的预期，会给用户带来困扰（个别输入法自作多情而已）

实现的话，可以考虑劫持某个输入事件，判断最后输入的两个字符，如果是一对括号，则多补一个左箭头

[rabbbit]

<input>
<button>插入</button>

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;
})

[xuxuzhaozhao]

@rabbbit 牛批！

[lisisi]

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

[lisisi]

@rabbbit 出现一个疑问：我把上面 JS 部分放进一个 onclick() 函数之后，反复点两三次，就会一次会插入多个双括号。这是什么原因导致的？

JS 部分的代码没改动，只是放进了一个 onclick="addBrackets()" 中，就会出现插入多个双括号的情况：

<input>
<button onclick="addBrackets()">插入</button>

<script type="text/javascript">
function addBrackets() {
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;
})
}
</script>