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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 2200 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

<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 条回复 2019-11-20 20:10:09 +08:00

fancy111

2019-11-20 09:56:07 +08:00

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

IsaacYoung

2019-11-20 10:07:34 +08:00 via iPhone

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

15651980765

2019-11-20 10:24:21 +08:00

先 mark，有时间再看。

learnshare

2019-11-20 10:33:47 +08:00

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

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

rabbbit

2019-11-20 10:43:56 +08:00

<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

2019-11-20 10:48:30 +08:00

@rabbbit 牛批！

lisisi

2019-11-20 12:24:58 +08:00

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

lisisi

2019-11-20 20:10:09 +08:00

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