Chrome更新后，点击网页文字出现闪烁光标的解决办法

2026/01/22
- 编程
0阅读

今天正在编写项目代码时，无意间发现点击日历组件后，在文字中间出现了一个闪烁光标…

问题截图

最初我以为是早上更新了PrimeVue的版本导致的，于是我打开官网文档，准备从官网示例中去复现一下情况。结果无意点击到文字段落上也出现了一个闪烁光标。

点击的文字段落处也闪烁光标

这在以前从未出现过，因此我认为问题可能不在于UI库，而像是浏览器本身的行为。但在进一步调查之前，我需要先排除是否由最近启用的两个Chrome插件引起的问题。

我关闭了全部的Chrome插件，但问题依旧存在

于是我开始问ChatGPT，它很快给出了正确的回答以及官方推出的动机：

在新版 Chrome（约 120+ 之后逐步放开）中，Chrome 新版引入的一项可访问性 / 易用性行为变化，当你单击网页中的“普通文本”时，Chrome 会显示一个闪烁的文本光标（caret），看起来就像该文本“被选中并可编辑”一样。但实际上页面并没有进入编辑状态，只是浏览器层面的文本光标定位。

官方动机（为什么这么做）

这是 Chrome 推出的 “点击即定位光标（Caret Browsing Lite）” 行为，核心目的包括：

提升可访问性，方便键盘用户用方向键逐字阅读文本
提升复制体验，点击后直接 Shift + ←/→ 选中文本
与移动端行为趋同，移动端浏览器早已有类似行为

这和传统的 F7 启用“光标浏览模式” 是同一技术路线，只是：

以前：需要手动开启
现在：默认对鼠标点击生效（轻量化版本）

目前这个特性会影响所有<p>、span、<div>标签内的文本选中，除非手动关闭浏览器行为（只覆盖自己）或针对标签添加样式（覆盖所有人）。

一、手动关闭浏览器行为

在地址栏访问 chrome://settings/accessibility，关闭 “通过文本光标浏览页面”

关闭此选项

二、针对标签添加样式

给<p>、span、<div>等元素添加一个no-caret样式类，禁止选中文本和设置光标的颜色为透明。

.no-caret {
  user-select: none;
  caret-color: transparent;
}

最后，由于对我造成的主要影响是可交互组件/按钮的文本出现光标了，所以我缩小了样式应用范围，仅针对可交互组件的文本样式进行了设置，大家可以根据情况来进行调整。

.button-text,
.label {
  user-select: none;
  caret-color: transparent;
}