本文提供一种基于光标位置与最外层方括号边界比对的高效方案，用于实时判断用户当前输入是否位于 [] 包裹范围内（支持嵌套），并阻止在括号外的非法输入。
本文提供一种基于光标位置与最外层方括号边界比对的高效方案，用于实时判断用户当前输入是否位于 [] 包裹范围内（支持嵌套），并阻止在括号外的非法输入。
在富文本编辑或模板化输入场景中，常需限制用户仅能在特定标记（如 [ ]）内部编辑，例如 Leave[ Nested[ Test[] ] ] —— 允许在任意层级的方括号内增删字符，但禁止修改括号外内容或破坏括号结构。关键不在于解析嵌套深度，而在于定位最外层匹配的 [] 边界，并约束光标始终处于其内部。
核心思路：光标锚定 + 输入拦截
利用 textarea.onbeforeinput 事件，在输入发生前获取当前光标位置（selectionStart / selectionEnd）及文本内容，动态计算最外层左括号 [ 的首次出现位置和右括号 ] 的末次出现位置：
const textarea = document.querySelector("textarea") as HTMLTextAreaElement;
textarea.onbeforeinput = (evt) => {
const { selectionStart, selectionEnd, value } = textarea;
const bracketStart = value.indexOf("[");
const bracketEnd = value.lastIndexOf("]");
// 若光标完全在最外层括号之外，禁止输入
if (bracketStart === -1 || bracketEnd === -1 ||
selectionStart <= bracketStart ||
selectionEnd > bracketEnd) {
evt.preventDefault();
return;
}
// 阻止破坏括号结构的关键操作：
// - Backspace 删除左括号后一个字符（即 `[|x` → 不允许删 `x`）
if (evt.inputType === "deleteContentBackward" && selectionEnd === bracketStart + 1) {
evt.preventDefault();
}
// - Delete 删除右括号本身（即 `x]|` → 不允许删 `]`）
if (evt.inputType === "deleteContentForward" && selectionStart === bracketEnd) {
evt.preventDefault();
}
// - 整词删除可能越界，统一禁用（可根据需求细化）
if (["deleteWordBackward", "deleteWordForward"].includes(evt.inputType)) {
evt.preventDefault();
}
};注意事项与增强建议
- ✅ 嵌套兼容性：本方案天然支持任意深度嵌套（如
A[B[C[]D]E]F），因只依赖最外层[]边界，无需递归解析。 - ⚠️ 边界鲁棒性：需确保初始文本至少含一对完整
[]，否则indexOf/lastIndexOf返回-1，应添加空括号校验逻辑。 - ? 扩展方向：若需支持多组独立括号（如
Text[one][] and [two][]），可改用正则匹配所有[...]区间并检查光标是否落在任一区间内。 - ? 兼容性提示：
onbeforeinput在现代浏览器中支持良好，旧版 Safari 可降级使用input事件 +setTimeout延迟校验（牺牲部分实时性）。
该方案以极简逻辑实现强约束，兼顾性能与可维护性，是模板化编辑场景下的轻量级实践范例。
