dev.to | 📄 原文链接 | 2026-09-01 收录

JavaScript 页面查找：把 Codename One 画布上方的文本提升进 DOM 层

来源：dev.to — 2026-09-01

📋 概述

Codename One 的 JavaScript 移植版把每个字形都画在 canvas 上，导致浏览器"页面内查找"、文本选择和辅助功能都找不到可见标签——浏览器搜不到像素。PR #5552 保留了 canvas 渲染器，同时把符合条件的可见文本投影到一层 DOM：仍由 Codename One 测量与排布每个 run，浏览器则接管它更擅长的文本栅格化、选择、搜索与无障碍。语义树采用差分更新而非每次重建，避免滚动破坏焦点与选区；同时支持高 DPI 原生分辨率、inputmode/autocomplete 等输入元数据。

🔑 核心要点

Codename One 把字形画在 canvas 上，浏览器搜索、选择与无障碍都找不到文本
PR #5552 保留 canvas 渲染器，仅把可见文本投影到独立 DOM 层，不把布局交给浏览器
覆盖层对语义树做差分更新，滚动不再销毁 DOM 焦点与文本选区
高 DPI 显示用原生分辨率：375x667 的 CSS 框对应 750x1334 的 backing surface
补齐 inputmode、autocomplete、autocapitalize 等输入元数据，并修复 PASSWORD 位标志误比较
离屏目标、形变文本、位图字体等仍留在 canvas 上，DOM 层是精准补位

💡 金句

浏览器搜索找不到像素。让应用组件留在 canvas 上，只把浏览器需要的那部分文本与无障碍数据投影给它。

← 返回 dev.to 首页