如何在HTML textarea中实现括号自动补全及光标居中定位？

你的思路方向是对的，但原代码有两个关键问题：一是没有考虑光标当前的位置（直接把右括号追加到文本末尾，在中间输入时会出错），二是光标最终会停在右括号后面，而不是我们想要的括号中间。下面给你一个完整的解决方案：

首先，我们需要监听keydown事件（比keypress更可靠，能更好地控制默认行为），然后通过操作光标位置来实现精准插入和定位：

<textarea id="editor" cols="30" rows="10"></textarea>

<script>
const editor = document.getElementById("editor");
if (editor) {
  editor.addEventListener("keydown", (ev) => {
    // 处理左括号输入
    if (ev.key === "(") {
      // 阻止默认的左括号输入行为，避免重复添加
      ev.preventDefault();
      
      // 获取当前光标起始和结束位置（处理选中文本的情况）
      const startPos = editor.selectionStart;
      const endPos = editor.selectionEnd;
      const currentValue = editor.value;
      
      // 在光标位置插入"()"
      editor.value = currentValue.substring(0, startPos) + "()" + currentValue.substring(endPos);
      
      // 将光标移动到括号中间，也就是原光标位置+1
      editor.selectionStart = editor.selectionEnd = startPos + 1;
    }
  });
}
</script>

代码解释： #

• 阻止默认行为：ev.preventDefault()避免浏览器自动输入左括号，因为我们要手动插入完整的()
• 光标位置处理：通过selectionStart和selectionEnd获取当前光标位置（如果用户选中了一段文本，这段代码也能自动把选中内容包裹在括号里，算是额外的小功能）
• 插入括号：把原文本分成光标前、括号、光标后三部分拼接起来
• 定位光标：将光标位置设置为原起始位置+1，刚好落在两个括号中间

如果想要扩展支持其他符号（比如[]、{}、双引号""、单引号''），只需要多添加几个条件判断即可，比如：

// 扩展支持多种符号
const pairs = {
  "(": ")",
  "[": "]",
  "{": "}",
  '"': '"',
  "'": "'"
};

editor.addEventListener("keydown", (ev) => {
  const closeChar = pairs[ev.key];
  if (closeChar) {
    ev.preventDefault();
    const startPos = editor.selectionStart;
    const endPos = editor.selectionEnd;
    const currentValue = editor.value;
    
    editor.value = currentValue.substring(0, startPos) + ev.key + closeChar + currentValue.substring(endPos);
    editor.selectionStart = editor.selectionEnd = startPos + 1;
  }
});

这样就能一次性支持多种符号的自动补全和光标定位啦～

内容的提问来源于stack exchange，提问作者Usitha Indeewara