本文提供一种基于光标位置检测用户是否在 最外层方括号 [] 内输入的可靠方案，支持嵌套结构（如 Leave[ Nested[ Test[] ] ]），并阻止在括号外的非法输入与破坏性删除操作。
本文提供一种基于光标位置检测用户是否在 `
在富文本约束场景中（如模板编辑器、DSL 输入框），常需限制用户仅能在特定标记（如 [ ]）内部编辑内容，而保持外围结构不可修改。值得注意的是：嵌套本身不影响判定逻辑——关键在于用户当前光标/选区是否落在最外层一对匹配方括号之间。
以下是一个生产就绪的核心思路：不依赖字符串比对（如 prev vs 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 < bracketStart || selectionEnd > 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();
}
};✅ 使用示例：
<textarea>Leave[]</textarea> <!-- 或 --> <textarea>Leave[ Nested[ Test[] ] ]</textarea>
⚠️ 注意事项：
- 此方案基于
onbeforeinput，兼容现代浏览器（Chrome 62+、Firefox 69+、Edge 79+），IE 不支持，需降级处理； - 未覆盖所有极端编辑行为（如拖拽粘贴跨括号内容、IME 组合输入），如需更高鲁棒性，建议配合
input事件后校验 + 自动修复（如补全缺失括号）； - 若需支持多组独立括号（如
A[] B[]），则需改用栈式解析定位“当前光标所在括号对”，而非仅取首尾； - 函数
checkIfTypingBetweenBrackets(prev: string, current: string)在此场景下并非最优解——因无法获知光标位置，易受粘贴、撤销等非线性编辑干扰，推荐优先采用事件驱动 + 光标定位方案。
该方法轻量、响应及时，且天然兼容任意深度嵌套，是实现「括号内可编辑、括号外只读」体验的推荐实践。
