点击 textarea 外围区域时，浏览器可能意外显示文本插入光标（i-beam），这并非 bug 而是默认行为；可通过 css 精准控制光标显示范围，无需 javascript 即可彻底解决。
点击 textarea 外围区域时，浏览器可能意外显示文本插入光标（i-beam），这并非 bug 而是默认行为；可通过 css 精准控制光标显示范围，无需 javascript 即可彻底解决。
该问题的本质在于：浏览器会将
关键误区在于：试图用 :focus 或 JS 动态切换 class 来“隐藏光标”，既无效（:focus 仅作用于聚焦态，且 cursor: default 并不能消除 I-beam），也偏离了问题根源。
✅ 正确解法是 主动限制光标生效范围：
- 为 textarea 显式定义 cursor: text（确保内部始终可见）；
- 为其父容器或全局 body 设置 cursor: default，并额外添加 .no-cursor 类覆盖所有可能触发光标的空白区域；
- 最关键一步：禁用 textarea 的 outline 和 resize 等干扰属性，避免视觉边界模糊导致误触发。
以下是推荐的完整解决方案（纯 CSS，零 JS）：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Textarea Cursor Control</title><style>
/* 重置默认行为，明确光标范围 */
body {
cursor: default; /* 全局默认光标 */
}
.textarea-container {
display: inline-block;
/* 可选：添加边框/阴影增强视觉边界感，减少误点 */
padding: 2px; /* 微调容器内边距，隔离空白区 */
}
.safe-textarea {
width: 300px;
height: 150px;
padding: 10px;
border-radius: 8px;
border: 1px solid #ccc;
resize: none; /* 禁用拖拽缩放，避免边界溢出 */
outline: none; /* 移除聚焦轮廓线，防止视觉干扰 */
cursor: text; /* ✅ 仅在 textarea 内显示 I-beam */
/* 可选：提升层级，确保点击优先命中 textarea */
position: relative;
z-index: 1;
}
/* 针对可能被误点的周边区域（如容器外侧、相邻空白）强制隐藏光标 */
.no-cursor {
cursor: none !important;
}
</style><!-- 推荐包裹容器，便于统一控制 --><div class="textarea-container">
<textarea class="safe-textarea" placeholder="Type here — cursor only appears inside"></textarea>
</div>
<!-- 若页面存在大量空白区域，可为 body 添加 no-cursor（谨慎使用） -->
<!-- <body class="no-cursor"> -->
⚠️ 注意事项：
- cursor: none 在部分场景（如辅助技术、触屏设备）中可能降低可访问性，不建议全局滥用；优先采用容器隔离 + 显式声明的方式；
- 避免给 textarea 设置过大的 margin 或 padding（尤其是负值），这会扩大“可点击但不可见”的区域；
- 若使用 Flex/Grid 布局，确保 textarea 的父容器未设置 align-items: center 等导致内容居中后留出大片空白，这些空白仍可能响应鼠标事件；
- 测试时请在 Chrome/Firefox/Safari 中分别验证，各浏览器对 cursor 的继承策略略有差异。
总结：光标行为由 CSS cursor 属性的作用域继承链决定，而非元素是否“获得焦点”。精准控制光标，核心在于缩小 cursor: text 的生效范围，并通过容器封装与视觉边界强化，从源头杜绝游离光标出现。
