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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2381 days ago, the information mentioned may be changed or developed.

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

<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 在刚刚插入的这对括号（）中间位置？

插入

括号

光标

textarea

8 replies • 2019-11-20 20:10:09 +08:00

fancy111

Nov 20, 2019

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

IsaacYoung

Nov 20, 2019 via iPhone

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

15651980765

Nov 20, 2019

先 mark，有时间再看。

learnshare

Nov 20, 2019

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

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

rabbbit

Nov 20, 2019

<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

Nov 20, 2019

@rabbbit 牛批！

lisisi

Nov 20, 2019

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

lisisi

Nov 20, 2019

@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>