2026年，你终于可以在 `<textarea>` 里定位任意字符了

2026年8月，Chrome 152正式发布了 OpaqueRange API 。这个API解决了一个困扰前端开发者十几年的问题：如何在 <input> 或 <textarea> 中精确定位某一段文字的位置？

听起来很小，但你想想这个场景：用户在搜索框输入时，你想在光标下方弹出一个自动补全下拉框；用户在代码编辑器的 <textarea> 里打字，你想在拼错的单词下面画一条红色波浪线。在此之前，你几乎做不到------因为输入框内部是不可见的。

一、输入框里的"黑盒"问题

先看一个真实的开发场景。

你想做一个带自动补全的搜索框。用户打字时，下拉建议框应该出现在光标正下方。听起来很简单对吧？

问题是：你拿不到光标的位置。

<input> 和 <textarea> 是浏览器渲染的"黑盒"。你可以读取 selectionStart 知道光标在文本中的索引，但你无法知道这个索引在屏幕上对应哪个坐标 。你没法调用 getBoundingClientRect()，因为 <input> 内部根本没有可寻址的DOM节点。

开发者们被逼出了各种"土办法"：

方案一：镜像元素（Mirror Element） 。在输入框下面隐藏一个完全一样的 <div>，把输入框的样式复制过去，然后在div里用 <span> 包裹每个字符，用 <span> 的 getBoundingClientRect() 来模拟光标位置。这个方法极其脆弱------字体、行高、换行、滚动位置稍有变化，镜像就对不齐了。

方案二：隐藏 textarea + 可编辑div 。放弃原生输入框，自己用 contenteditable 的div做一个"假输入框"，这样内部每个字符都是真实的DOM节点，可以随便定位。但这样做等于放弃了原生输入框的所有能力：输入法、撤销、自动填充、无障碍支持。

方案三：第三方库。引入 CodeMirror、Monaco 这样的编辑器库。但它们体积巨大（动辄几百KB），而且本质上也是用方案二实现的。

十几年了，前端开发者一直在用各种Workaround来模拟"输入框内的文本定位"。

OpaqueRange API 一次性解决了所有问题。

二、OpaqueRange 是什么？

OpaqueRange 是一个新的 Web API，代表 <input> 或 <textarea> 中一段实时的文本范围。

"Opaque"的意思是"不透明的"------你不需要知道输入框内部是怎么渲染的，你只需要拿到这段文字在屏幕上的位置信息。

它的核心能力包括：

getBoundingClientRect() ：获取这段文字在屏幕上的矩形位置
getClientRects() ：获取这段文字可能跨多行时的多个矩形
与 CSS Custom Highlight API 集成：可以对这段文字应用自定义高亮样式

它不暴露输入框内部DOM结构 。你拿不到输入框里的 <span>，你只拿到几何信息和高亮能力。这既保护了浏览器对输入框的渲染控制权，又给了开发者需要的能力。

三、怎么用？三步上手

OpaqueRange 的使用方式非常简单。

第一步：从输入框创建范围

javascript 复制代码

const textarea = document.querySelector('textarea');
const range = textarea.createValueRange(0, 5); // 从索引0到索引5的文字范围

createValueRange() 是新的方法，直接在 <input> 或 <textarea> 元素上调用，接收起始索引和结束索引。

第二步：获取几何信息

javascript 复制代码

const rect = range.getBoundingClientRect();
console.log(rect.top, rect.left, rect.width, rect.height);
// 你可以用这些坐标来定位一个弹出框

如果你需要处理跨行文本：

javascript 复制代码

const rects = range.getClientRects();
rects.forEach(rect => {
  // 每一行文字对应一个矩形
});

第三步：应用高亮

OpaqueRange 与 CSS Custom Highlight API 集成，可以对输入框内的文字应用自定义样式：

javascript 复制代码

const highlight = new Highlight(range);
CSS.highlights.set('spell-check', highlight);

css 复制代码

::highlight(spell-check) {
  text-decoration: underline wavy red;
}

就这么简单。 不需要镜像元素，不需要隐藏的div，不需要第三方库。你直接告诉浏览器"我要索引3到8这段文字的位置和高亮"，浏览器就给你。

四、四个真实的应用场景

场景一：自动补全下拉框跟随光标

用户在搜索框打字时，建议列表应该出现在光标下方。以前只能靠镜像元素"猜"位置，现在可以直接用 createValueRange(caretIndex, caretIndex) 创建零长度的范围，拿到光标的精确坐标。

场景二：代码编辑器语法高亮

在 <textarea> 里做语法高亮，以前只能靠镜像div或者用CodeMirror。现在可以直接用 OpaqueRange 标记每个token的范围，配合 CSS Custom Highlight API 上色。有开发者已经用这个API实现了GPU加速的通用语法高亮器。

场景三：拼写检查波浪线

浏览器原生的拼写检查只能用红色波浪线。如果你想要自定义的拼写检查样式，或者集成第三方拼写检查服务，OpaqueRange 让你可以在任意文字范围上应用自定义高亮。

场景四：输入框内的锚定弹窗

"在输入框的第42个字符下面弹出一个tooltip"------以前这几乎是不可能完成的任务。现在 getBoundingClientRect() 直接给你坐标，你只需要把弹窗定位到那个位置。

五、浏览器支持与兼容性

OpaqueRange 目前的支持情况：

Chrome 152+：已支持（2026年8月发布）
Edge 152+：已支持
Safari 27：正在实现中（WebKit 已有关联的 Bug 跟踪）
Firefox：尚未支持（但 Mozilla 已参与 WHATWG 的规范讨论）

这是一个渐进增强的API。 在不支持的浏览器上，你可以降级到传统的镜像元素方案，或者直接跳过相关功能。它不会导致页面崩溃------createValueRange() 在不支持的浏览器上只是一个未定义的方法。

六、更大的图景：Web平台正在"打开"输入框

OpaqueRange 不是孤立的更新。

2026年，Microsoft Edge 团队还推出了 OpaqueRange API 的兄弟功能：

referenceTarget ：让 <label> 可以正确关联到 Shadow DOM 内部的 <input>，解决了 Web Components 无障碍支持的老大难问题。

aria-actions：让复合组件（比如带关闭按钮的标签页）可以把次要操作暴露给辅助技术。

WebMCP：让网站主动向 AI Agent 暴露结构化的工具和表单，Agent 不再需要"猜"页面怎么用。

这些更新的共同逻辑是：Web平台正在把过去藏在浏览器内部的能力，以标准化的方式开放给开发者。

输入框的内部渲染曾经是浏览器的"私有领域"。OpaqueRange 把它打开了一条缝------不是完全暴露，而是提供足够的几何和样式信息，让开发者可以做以前做不到的事情。

这是一次对"浏览器黑盒"的精准开窗。

写在最后

OpaqueRange API 不是那种"惊天动地"的新特性。它不会改变你写React组件的方式，不会让你的应用变快十倍，不会让AI帮你写更多代码。

但它解决了一个真实存在了十几年的问题：输入框里的文字，终于可以被定位了。

自动补全下拉框可以精确跟随光标。代码编辑器的语法高亮不再需要镜像div。拼写检查可以自定义样式。输入框内的锚定弹窗从"几乎不可能"变成了"一行代码"。

Chrome 152 已经支持。 如果你在做搜索框、代码编辑器、富文本输入或者任何需要精确定位输入框内文字的界面，OpaqueRange 值得你花十分钟试一下。

参考链接：

Chrome 152 Release Notes

OpaqueRange Explainer (Microsoft Edge)

OpaqueRange Demo