如何判断用户是否正在文本域的方括号内输入

本文提供一种基于光标位置检测用户是否在 最外层方括号 [] 内输入的可靠方案，支持嵌套结构（如 Lea ve[ Nested[ Test[] ] ]），并阻止在括号外的非法输入与破坏性删除操作。

本文提供一种基于光标位置检测用户是否在 `` 最外层方括号 `[]` 内输入的可靠方案，支持嵌套结构（如 `Lea ve[ Nested[ Test[] ] ]`），并阻止在括号外的非法输入与破坏性删除操作。

在富文本受限的编辑场景里，比如模板编辑器、DSL 输入框，常见的一类需求是：只允许用户在特定标记（如 [ ]）内部改内容，外层结构则必须保持不被改动。需要特别注意的是，是否存在嵌套，并不会改变判断逻辑；真正决定能否编辑的关键，是用户当前的光标或选区，是否位于最外层那一对已匹配方括号之间。

更稳妥、也更接近生产环境的做法，其实不是去依赖字符串对比（比如 prev 和 current），而是直接利用原生 input 事件触发前的实时光标位置（selectionStart / selectionEnd），再配合括号边界索引来完成判断：

const textarea = document.querySelector("textarea") as HTMLTextAreaElement;

textarea.onbeforeinput = (evt: InputEvent) => {
const { selectionStart, selectionEnd, value } = textarea;

// 定位最外层 [ 和 ] 的位置（注意：indexOf 找第一个 [，lastIndexOf 找最后一个 ]）
const bracketStart = value.indexOf("[");
const bracketEnd = value.lastIndexOf("]");

// 若未找到成对括号，或光标完全在括号外 → 阻止输入
if (bracketStart === -1 || bracketEnd === -1 || bracketStart >= bracketEnd) {
evt.preventDefault();
return;
}

// 光标起始位置超出左括号前，或结束位置超出右括号后 → 不允许输入
if (selectionStart  bracketEnd + 1) {
evt.preventDefault();
return;
}

// 防止破坏括号结构的关键保护：
// 1. Backspace 删除左括号紧邻右侧字符（即 `[|x` → 按退格会删掉 `[`）
if (evt.inputType === "deleteContentBackward" && selectionStart === bracketStart + 1) {
evt.preventDefault();
}
// 2. Delete 删除右括号本身（即 `x]|` → 按删除会删掉 `]`）
if (evt.inputType === "deleteContentForward" && selectionStart === bracketEnd) {
evt.preventDefault();
}
// 3. 单词级删除（如 Ctrl+Backspace）也一并禁用，避免意外切开括号
if (["deleteWordBackward", "deleteWordForward"].includes(evt.inputType)) {
evt.preventDefault();
}
};

✅ 使用示例：

Lea ve[]Lea ve[ Nested[ Test[] ] ]

⚠️ 注意事项：

• 此方案基于 onbeforeinput，兼容现代浏览器（Chrome 62+、Firefox 69+、Edge 79+），IE 不支持，需降级处理；
• 未覆盖所有极端编辑行为（如拖拽粘贴跨括号内容、IME 组合输入），如需更高鲁棒性，建议配合 input 事件后校验 + 自动修复（如补全缺失括号）；
• 若需支持多组独立括号（如 A[] B[]），则需改用栈式解析定位“当前光标所在括号对”，而非仅取首尾；
• 函数 checkIfTypingBetweenBrackets(prev: string, current: string) 在此场景下并非最优解——因无法获知光标位置，易受粘贴、撤销等非线性编辑干扰，推荐优先采用事件驱动 + 光标定位方案。

该方法轻量、响应及时，且天然兼容任意深度嵌套，是实现「括号内可编辑、括号外只读」体验的推荐实践。