本文提供一种基于光标位置检测用户是否在 </code> 最外层方括号 <code>[]</code> 内输入的可靠方案，支持嵌套结构（如 <code>Lea ve[ Nested[ Test[] ] ]</code>），并阻止在括号外的非法输入与破坏性删除操作。</p> <p><a href="https://img.wishdown.com/upload/news/202608170baa19a85c0713f2966643cc6952047e.webp" target="_blank"><img title="如何判断用户是否正在文本输入框的方括号内输入_wishdown.com" src="https://img.wishdown.com/upload/news/202608170baa19a85c0713f2966643cc6952047e.webp" alt="如何判断用户是否正在文本域的方括号内输入" /></a></p> <p>本文提供一种基于光标位置检测用户是否在 <code><textarea></code> 最外层方括号 <code>[]</code> 内输入的可靠方案，支持嵌套结构（如 <code>Lea ve[ Nested[ Test[] ] ]</code>），并阻止在括号外的非法输入与破坏性删除操作。</p> <h2>适用场景</h2> <p>在富文本受限的编辑场景里，比如模板编辑器、DSL 输入框，常见需求是：只允许用户在特定标记（如 <code>[ ]</code>）内部修改内容，外层结构必须保持不被改动。</p> <p><strong>是否存在嵌套，并不会改变判断逻辑。</strong>真正决定能否编辑的关键，是用户当前的光标或选区，是否位于最外层那一对已匹配方括号之间。</p> <h2>推荐实现思路</h2> <p>更稳妥、也更接近生产环境的做法，不是依赖字符串对比（比如 <code>prev</code> 和 <code>current</code>）。</p> <p>更推荐直接利用原生 <code>input</code> 事件触发前的实时光标位置（<code>selectionStart</code> / <code>selectionEnd</code>），再配合括号边界索引完成判断。</p> <pre><pre>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(); } };</pre></pre> <h2>示例</h2> <p><strong>使用示例</strong>：</p> <pre><pre><textarea>Lea ve[] Lea ve[ Nested[ Test[] ] ]

关键要点

• 判断依据不是是否嵌套，而是光标或选区是否位于最外层方括号内部。
• 推荐采用事件驱动 + 光标定位方案，比单纯做字符串前后对比更稳定。
• 通过 onbeforeinput，可以在输入真正发生前拦截非法操作。
• 针对 Backspace、Delete、单词级删除，还需要额外保护，避免破坏括号结构。

注意事项

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

结论

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

《夸克》非常好用的免费AI浏览器

下载APP查看