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

2026年8月，Chrome 152正式发布了 OpaqueRange API。这个API解决了一个困扰前端开发者十几年的问题：如何在 或 中精确定位某一段文字的位置？</p> <p>听起来很小，但你想想这个场景：用户在搜索框输入时，你想在光标下方弹出一个自动补全下拉框；用户在代码编辑器的 <textarea> 里打字，你想在拼错的单词下面画一条红色波浪线。在此之前，你几乎做不到——因为输入框内部是不可见的。</p> <p>你想做一个带自动补全的搜索框。用户打字时，下拉建议框应该出现在光标正下方。听起来很简单对吧？</p> <p><input> 和 <textarea> 是浏览器渲染的“黑盒”。你可以读取 selectionStart 知道光标在文本中的索引，但你无法知道这个索引在屏幕上对应哪个坐标。你没法调用 getBoundingClientRect()，因为 <input> 内部根本没有可寻址的DOM节点。</p> <p>方案一：镜像元素（Mirror Element） 。在输入框下面隐藏一个完全一样的 <div>，把输入框的样式复制过去，然后在div里用 <span> 包裹每个字符，用 <span> 的 getBoundingClientRect() 来模拟光标位置。这个方法极其脆弱——字体、行高、换行、滚动位置稍有变化，镜像就对不齐了。</p> <p>方案二：隐藏 textarea + 可编辑div。放弃原生输入框，自己用 contenteditable 的div做一个“假输入框”，这样内部每个字符都是真实的DOM节点，可以随便定位。但这样做等于放弃了原生输入框的所有能力：输入法、撤销、自动填充、无障碍支持。</p> <p>方案三：第三方库。引入 CodeMirror、Monaco 这样的编辑器库。但它们体积巨大（动辄几百KB），而且本质上也是用方案二实现的。</p> <p>十几年了，前端开发者一直在用各种Workaround来模拟“输入框内的文本定位”。</p> <p>OpaqueRange API 一次性解决了所有问题。</p> <p>OpaqueRange 是一个新的 Web API，代表 <input> 或 <textarea> 中一段实时的文本范围。</p> <p>“Opaque”的意思是“不透明的”——你不需要知道输入框内部是怎么渲染的，你只需要拿到这段文字在屏幕上的位置信息。</p> <p>它不暴露输入框内部DOM结构。你拿不到输入框里的 <span>，你只拿到几何信息和高亮能力。这既保护了浏览器对输入框的渲染控制权，又给了开发者需要的能力。</p> <p>createValueRange() 是新的方法，直接在 <input> 或 <textarea> 元素上调用，接收起始索引和结束索引。</p> <p>OpaqueRange 与 CSS Custom Highlight API 集成，可以对输入框内的文字应用自定义样式：</p> <p>就这么简单。 不需要镜像元素，不需要隐藏的div，不需要第三方库。你直接告诉浏览器“我要索引3到8这段文字的位置和高亮”，浏览器就给你。</p> <p>用户在搜索框打字时，建议列表应该出现在光标下方。以前只能靠镜像元素“猜”位置，现在可以直接用 createValueRange(caretIndex, caretIndex) 创建零长度的范围，拿到光标的精确坐标。</p> <p>在 <textarea> 里做语法高亮，以前只能靠镜像div或者用CodeMirror。现在可以直接用 OpaqueRange 标记每个token的范围，配合 CSS Custom Highlight API 上色。有开发者已经用这个API实现了GPU加速的通用语法高亮器。</p> <p>浏览器原生的拼写检查只能用红色波浪线。如果你想要自定义的拼写检查样式，或者集成第三方拼写检查服务，OpaqueRange 让你可以在任意文字范围上应用自定义高亮。</p> <p>“在输入框的第42个字符下面弹出一个tooltip”——以前这几乎是不可能完成的任务。现在 getBoundingClientRect() 直接给你坐标，你只需要把弹窗定位到那个位置。</p> <p>这是一个渐进增强的API。 在不支持的浏览器上，你可以降级到传统的镜像元素方案，或者直接跳过相关功能。它不会导致页面崩溃——createValueRange() 在不支持的浏览器上只是一个未定义的方法。</p> <p>2026年，Microsoft Edge 团队还推出了 OpaqueRange API 的兄弟功能：</p> <p>referenceTarget：让 <label> 可以正确关联到 Shadow DOM 内部的 <input>，解决了 Web Components 无障碍支持的老大难问题。</p> <p>aria-actions：让复合组件（比如带关闭按钮的标签页）可以把次要操作暴露给辅助技术。</p> <p>WebMCP：让网站主动向 AI Agent 暴露结构化的工具和表单，Agent 不再需要“猜”页面怎么用。</p> <p>来源：稀土掘金　<a href="https://juejin.cn/post/7690190550998007827" target="_blank" rel="noopener">原文</a></p></div> </article> <nav class="product-detail-adjacent" aria-label="上一篇下一篇"> <a class="product-detail-adjacent-item" href="/a/443"> <span class="product-detail-adjacent-label">上一篇</span> <span class="product-detail-adjacent-title">读懂LangGraph 的分支执行逻辑</span> </a> <a class="product-detail-adjacent-item product-detail-adjacent-item--next" href="/a/441"> <span class="product-detail-adjacent-label">下一篇</span> <span class="product-detail-adjacent-title">非游戏开发者用 AI 做微信小游戏的完整实录：聊天出 MVP、备案 27 天、踩坑</span> </a> </nav> </div> <aside class="info-list-aside info-detail-aside" aria-label="相关栏目与文章"> <div class="info-list-aside-block"> <p class="info-list-aside-label">相关栏目</p> <nav class="info-aside-nav"> <a class="info-aside-link " href="/list/13"> <span class="info-aside-link-text">营销推广</span> <span class="info-aside-link-count">1</span> </a> <a class="info-aside-link " href="/list/14"> <span class="info-aside-link-text">眼界拓展</span> <span class="info-aside-link-count">22</span> </a> <a class="info-aside-link is-active" href="/list/15"> <span class="info-aside-link-text">热门资讯</span> <span class="info-aside-link-count">39</span> </a> <a class="info-aside-link " href="/list/16"> <span class="info-aside-link-text">渠道运营</span> <span class="info-aside-link-count">2</span> </a> <a class="info-aside-link " href="/list/17"> <span class="info-aside-link-text">文案策划</span> <span class="info-aside-link-count">3</span> </a> </nav> <a class="info-aside-back link-accent" href="/list/7">← 返回动态资讯</a> </div> <div class="info-list-aside-block info-list-aside-block--rec"> <p class="info-list-aside-label">相关文章</p> <ul class="info-aside-rec"> <li> <a class="info-aside-rec-link" href="/a/567"> <span class="info-aside-rec-title">渠道运营怎么做：先看清渠道里的人是谁，再选一个渠道开干的步骤</span> <time class="info-aside-rec-date" datetime="2026-10-02">2026-10-02</time> </a> </li> <li> <a class="info-aside-rec-link" href="/a/566"> <span class="info-aside-rec-title">渠道运营：先认清人，再选一个渠道开干</span> <time class="info-aside-rec-date" datetime="2026-10-02">2026-10-02</time> </a> </li> <li> <a class="info-aside-rec-link" href="/a/565"> <span class="info-aside-rec-title">写文案如何先定一个说法并让读者听得懂</span> <time class="info-aside-rec-date" datetime="2026-10-02">2026-10-02</time> </a> </li> <li> <a class="info-aside-rec-link" href="/a/564"> <span class="info-aside-rec-title">写文案怎么检查读者能不能照着做：哪些步骤能帮新手把说法落地</span> <time class="info-aside-rec-date" datetime="2026-10-02">2026-10-02</time> </a> </li> <li> <a class="info-aside-rec-link" href="/a/563"> <span class="info-aside-rec-title">写文案先定一个说法：标题怎么让读者听得懂，正文如何写成能照着做的话</span> <time class="info-aside-rec-date" datetime="2026-10-02">2026-10-02</time> </a> </li> <li> <a class="info-aside-rec-link" href="/a/553"> <span class="info-aside-rec-title">社区速递 159 | 便携卡片充电器与库克十五年改变生活的产品</span> <time class="info-aside-rec-date" datetime="2026-10-02">2026-10-02</time> </a> </li> </ul> </div> <a class="info-detail-back-list" href="/list/15"> <span class="info-detail-back-list-kicker">返回栏目列表</span> <span class="info-detail-back-list-name">热门资讯</span> </a> </aside> </div> </div> </main> <aside class="side-tools" aria-label="页面快捷操作"> <div class="side-tool-wx"> <button type="button" class="side-tool side-tool-wx-btn" aria-label="微信咨询"> <svg class="side-tool-wx-icon" width="22" height="22" viewBox="0 0 24 24" aria-hidden="true"> <path fill="currentColor" d="M8.5 4C4.91 4 2 6.46 2 9.58c0 1.75.93 3.31 2.38 4.32L3.5 16l2.65-1.32c.89.25 1.84.39 2.85.39.28 0 .55-.02.82-.05-.17-.55-.27-1.13-.27-1.72 0-3.47 3.13-6.28 7-6.28.34 0 .67.03 1 .07C16.09 5.57 12.54 4 8.5 4zm-2.3 4.55c-.55 0-1-.42-1-.94s.45-.94 1-.94 1 .42 1 .94-.45.94-1 .94zm4.6 0c-.55 0-1-.42-1-.94s.45-.94 1-.94 1 .42 1 .94-.45.94-1 .94z"/> <path fill="currentColor" d="M22 14.42c0-2.62-2.46-4.74-5.5-4.74-3.04 0-5.5 2.12-5.5 4.74 0 2.63 2.46 4.75 5.5 4.75.96 0 1.86-.22 2.65-.6L22 20l-1.28-2.38c.83-.78 1.28-1.78 1.28-2.2zM14.8 13.5c-.41 0-.75-.32-.75-.71 0-.4.34-.72.75-.72s.75.32.75.72c0 .39-.34.71-.75.71zm3.4 0c-.41 0-.75-.32-.75-.71 0-.4.34-.72.75-.72s.75.32.75.72c0 .39-.34.71-.75.71z"/> </svg> </button> <div class="side-tool-qr" role="tooltip"> <img src="/uploads/20260930/ba0bc2e1d0f2bdcdb7c06db543666b66.png" alt="微信二维码" width="132" height="132" loading="lazy"> <p>微信咨询</p> </div> </div> <button type="button" class="side-tool side-tool-top" id="backToTop" hidden aria-label="回到顶部"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"> <path d="M12 19V5M5 12l7-7 7 7"/> </svg> </button> </aside> <footer class="bottom"> <div class="shell"> <div class="bottom-inner"> <a class="bottom-logo" href="/"><img src="/uploads/20261001/cbb4143a29d481f8d9a0abd72ba36859.png" alt="柏态云-建站智脑-小程序开发-GEO搜索优化" height="36"></a> <div class="bottom-legal"> <span class="bottom-meta">Copyright © 2026 · 四川柏态云科技有限公司</span> <a class="bottom-meta bottom-icp" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">蜀ICP备2023038596号</a> <a class="bottom-meta bottom-icp" href="/sitemap.xml" target="_blank" rel="noopener">网站地图</a> </div> </div> </div> </footer> <script src="/assets/js/jz-home.js?v=34"></script> </body> </html>