当用户点击 textarea 元素外部区域（如右侧、左侧或下方空白处）时，浏览器可能仍显示文本插入光标（i-beam），这属于非预期的视觉干扰；本文提供纯 css 解决方案，无需 javascript，即可精准控制光标仅在 textarea 内可见。
当用户点击 textarea 元素外部区域（如右侧、左侧或下方空白处）时，浏览器可能仍显示文本插入光标（i-beam），这属于非预期的视觉干扰；本文提供纯 css 解决方案，无需 javascript，即可精准控制光标仅在 textarea 内可见。
该问题的本质并非 textarea 本身“泄露”光标，而是浏览器默认将
根本解决方案：限制光标作用域，而非依赖 focus/blur 事件
你提供的 JS 方案存在逻辑缺陷：.focus 时添加类、.blur 时移除类，但光标出现在 textarea 外部时，textarea 实际并未获得焦点（blur 已发生），因此事件监听无法捕获该状态；且 cursor: default 在 :focus 下无效——因为光标位置由鼠标所在元素决定，而非焦点元素。
✅ 正确做法是：为 textarea 的父容器或整个 body 设置默认无光标，再单独为 textarea 内部启用 text 光标：
Prompt Log
下载
从 AI 编程会话日志（Clawdbot、Claude Code、Codex）中提取对话记录。该功能用于在用户要求导出提示词历史、会话日志或 `.jsonl` 格式的会话文件时使用。
/* 全局禁用默认文本光标（可选，推荐精细控制） */
body {
cursor: default;
}
/* 仅在 textarea 元素内部显示 I-beam 光标 */
textarea {
cursor: text;
/* 关键：阻止 textarea 溢出区域响应鼠标 */
resize: none; /* 避免右下角拖拽区干扰 */
overflow: hidden; /* 防止内容溢出产生额外可点击区域 */
margin: 0; /* 清除默认外边距，避免点击 margin 区域触发光标 */
}
/* 更安全的做法：用 wrapper 显式隔离交互区域 */
.textarea-wrapper {
display: inline-block;
/* 确保 wrapper 不继承多余 padding/margin */
padding: 0;
margin: 0;
}
.textarea-wrapper * {
cursor: none; /* 默认禁用所有子元素光标 */
}
.textarea-wrapper textarea {
cursor: text !important; /* 强制仅 textarea 内生效 */
/* 移除 outline 避免聚焦时视觉干扰（按需） */
outline: none;
}
HTML 结构建议：
<div class="textarea-wrapper"> <textarea placeholder="Type something here..." style="width: 300px; height: 150px; padding: 10px; border-radius: 10px; border: 1px solid #ccc;"></textarea> </div>
⚠️ 注意事项：
- 不要使用 textarea:focus { cursor: default } —— 这无法影响鼠标位于 textarea 外时的光标样式；
- 避免给 textarea 设置过大的 margin，否则点击 margin 区域仍会触发浏览器默认文本光标（因该区域属于文档流中“可选择文本”的上下文）；
- 若页面含其他可编辑元素（如 contenteditable），需单独为其设置 cursor: text，避免全局 cursor: none 影响功能；
- Safari 对 cursor: none 支持良好，Chrome/Firefox 同样兼容，无需前缀。
总结：光标行为由鼠标悬停/点击的实际 DOM 元素决定，而非焦点状态。通过 wrapper 封装 + 精确的 cursor 层级覆盖，可 100% 消除 textarea 外部的光标显示，简洁、可靠、零 JS 依赖。
