点击 textarea 外围区域（如左右空白处）时意外出现闪烁光标，是因浏览器默认将 的 resize 控件或其父容器的可交互区域误判为文本输入上下文。本文提供纯 CSS 方案，无需 JavaScript，即可精准控制光标仅在 textarea 内显示。
点击 textarea 外围区域（如左右空白处）时意外出现闪烁光标，是因浏览器默认将 `
该问题的本质并非 JavaScript 事件逻辑错误，而是 CSS 光标行为未被正确约束。当用户点击 textarea 边框附近（尤其是启用 resize 的右下角控件区域），浏览器可能将焦点或光标渲染逻辑“外溢”到相邻空白区域——尤其在无明确容器边界、或父元素未禁用默认光标继承时更为明显。
✅ 正确解决方案：隔离光标作用域，而非依赖 focus/blur 动态切换类
关键在于两点：
- 禁用 textarea 默认 resize 区域的光标响应（该区域常被忽略但实际触发光标显示）；
- 为 textarea 的直接父容器设置 cursor: default，并确保子元素（textarea）单独定义 cursor: text，避免光标样式被继承或外溢。
/* 推荐方案：纯 CSS，稳定可靠 */
.textarea-container {
cursor: default; /* 父容器统一设为默认箭头光标 */
display: inline-block; /* 防止容器塌陷，确保边界清晰 */
}
.textarea-container textarea {
cursor: text; /* 仅在 textarea 内显示 I-beam 光标 */
resize: none; /* 关闭右下角缩放控件（其 hover/focus 易引发外溢光标） */
outline: none; /* 可选：移除聚焦轮廓，提升视觉一致性 */
/* 其他样式保持不变 */
border-radius: 10px;
padding: 10px;
width: 300px;
height: 150px;
font-size: 14px;
}
<div class="textarea-container"> <textarea placeholder="Type something here..."></textarea> </div>
⚠️ 注意事项：
- ❌ 避免使用 cursor: none 全局隐藏（如 .no_cursor { cursor: none; }）：这会彻底禁用所有光标，影响可访问性，且无法区分“内部可用”与“外部不可用”状态；
- ❌ 不要依赖 :focus 伪类切换 cursor（如 textarea:focus { cursor: default; }）：focus 状态下光标本应存在，此写法逻辑矛盾，且无法解决 blur 后点击边缘仍出光标的问题；
- ✅ 必须关闭 resize: both 或 resize: vertical（默认为 both），因为原生 resize 手柄是光标外溢的主要源头；
- ✅ 若需保留缩放功能，可改用 JavaScript 实现受控 resize，并配合 pointer-events: none 临时屏蔽 resize 区域光标。
总结：该问题不是 bug，而是 CSS 光标继承与浏览器 UI 控件交互的预期行为。通过语义化容器包裹 + 精确光标作用域限定 + 禁用原生 resize三步，即可零 JS、高兼容（支持 Chrome/Firefox/Safari/Edge）、无障碍地实现“光标严格限定于 textarea 可编辑区域内”的专业体验。
