虚拟键盘 API

W3C 工作草案

更多关于此文档的详细信息
此版本:
https://www.w3.org/TR/2022/WD-virtual-keyboard-20220505/
最新发布版本:
https://www.w3.org/TR/virtual-keyboard/
最新编辑草案:
https://w3c.github.io/virtual-keyboard/
历史:
https://www.w3.org/standards/history/virtual-keyboard
提交历史
编辑:
(微软公司)
前任编辑:
(微软公司)
反馈:
GitHub w3c/virtual-keyboard (拉取请求, 新问题, 开放问题)
public-editing-tf@w3.org 邮件主题 [virtual-keyboard] … 话题 … (档案)

摘要

VirtualKeyboard API 为开发者提供了更大的控制权,能够控制虚拟键盘 (VK) 的可见性,并能够更好地适应虚拟键盘可见性变化时网页布局的调整。

本文档状态

本节描述了本文档在发布时的状态。当前 W3C 出版物列表及本技术报告的最新修订版可在 W3C 技术报告索引找到,网址为 https://www.w3.org/TR/。

本文档由Web 编辑工作组发布为工作草案,使用了推荐流程

作为工作草案发布并不意味着 W3C 及其成员的认可。

本文档是草案,可能会随时更新、替换或被其他文档取代。引用本文档作为工作进展之外的用途是不合适的。

本文档由在 W3C 专利政策下运作的小组生成。 W3C 维护着与该小组交付成果相关的任何专利披露的公开列表;该页面还包括披露专利的说明。任何个人如果实际知晓其认为包含 基本专利声明 的专利,必须根据 W3C 专利政策第 6 节披露相关信息。

本文档受2021年11月2日 W3C 流程文档管辖。

1. 介绍

本节是非规范性的。

虚拟键盘 (VK) 是用于输入的屏幕键盘,适用于没有硬件键盘的场景。用户代理在以下情况下响应 VK 的存在,但不会将此信息暴露给 Web 开发者: 1. 将用户代理重新定位到 VK 之上 2. 减小布局视口的大小,以确保 VK 不会遮挡它 3. 减小视觉视口的大小,并为布局视口增加内边距,以确保它可以移动到 VK 之上 该 API 提供了第四个选项,允许用户代理保持其布局和视觉视口不变,而是提供 VK 和布局视口的交集信息,以便作者可以使用 JavaScript 或 CSS 环境变量调整其网页的布局。

显示双屏设备上虚拟键盘的图像 显示双屏设备上虚拟键盘的图像

显示单触摸屏设备上虚拟键盘的图像 显示单触摸屏设备上虚拟键盘的图像

2. 一致性

除了标记为非规范性的部分外,本规范中的所有创作指南、图表、示例和注释均为非规范性的。本规范中的其他所有内容均为规范性的。

本文档中的关键字 必须不得 应按照 BCP 14 [RFC2119] [RFC8174] 的描述进行解释,且仅在这些词汇以全大写形式出现时如此解释。

本规范定义的合规性标准适用于单一产品:实现了其包含的接口的用户代理

以算法或特定步骤表述的合规性要求可以以任何方式实现,只要最终结果是等效的即可。(特别是,本规范中定义的算法旨在易于理解,而非为了高效运行。)

3. VirtualKeyboard 接口

WebIDLpartial interface Navigator {
        [SecureContext, SameObject] readonly attribute VirtualKeyboard virtualKeyboard;
    };
    
    [Exposed=Window, SecureContext]
    interface VirtualKeyboard : EventTarget {
        undefined show();
        undefined hide();
        readonly attribute DOMRect boundingRect;
        attribute boolean overlaysContent;
        attribute EventHandler ongeometrychange;
    };

VirtualKeyboard 对象有以下关联属性:

boundingRect

DOMRect,初始值为零。

overlaysContent

一个布尔值,初始值为 false。当该属性设置为 true 时,用户代理不得调整其文档视口视觉视口的大小。

show() 方法

该方法必须按照以下步骤执行:

  1. windowthis相关全局对象。断言 windowWindow 对象。
  2. 如果 window 没有 粘性激活,则中止这些步骤。
  3. 如果焦点元素不是表单控件(例如 textarea 元素的值)或 编辑主机(例如使用 contenteditable) ,则中止这些步骤。
  4. 如果 virtualKeyboardPolicy 不是 manualinputMode 的 属性值为 none ,则中止这些步骤。
  5. 调用系统 API 显示 VK。
  6. 并行 执行以下步骤:
    1. 等待系统显示虚拟键盘。
    2. 调用 设置虚拟键盘边界矩形, 使用键盘的操作系统报告的边界矩形和文档视口 矩形。
    3. 触发一个名为 "geometrychange" 的事件 在此
hide() 方法

该方法必须按照以下步骤执行:

  1. windowthis相关全局对象。断言 windowWindow 对象。
  2. 如果 window 没有 粘性激活,则中止这些步骤。
  3. 如果焦点元素的 virtualKeyboardPolicy 不是 manualinputMode 的 属性值为 none ,则中止这些步骤。
  4. 调用系统 API 隐藏 VK。
  5. 并行 执行以下步骤:
    1. 等待系统隐藏虚拟键盘。
    2. 调用 设置虚拟键盘边界矩形 ,使用键盘的操作系统报告的边界矩形(全为 0 值)和 文档视口 矩形。
    3. 触发一个名为 "geometrychange" 的事件 在此
注意

平台启发式方法可能会对 VK 的show()hide() 施加额外限制。例如,在 Windows 上,指针类型必须为触摸或笔。

注意

一些人对显示担忧,关于 show()hide() 方法不是基于 Promise 的,但我们认为 Web 开发者使用 ongeometrychange 事件的设计更好,因为它在 VK 可见性变化时触发,使返回值不必要。

overlaysContent

overlaysContent getter 步骤为返回 thisoverlaysContent

overlaysContent setter 步骤为将 thisoverlaysContent 设置为给定值。

boundingRect

该属性报告 VK 与文档视口 在客户端坐标中的交集。调用 设置虚拟键盘边界矩形

设置虚拟键盘边界矩形

设置虚拟键盘边界矩形,使用 osk(表示屏幕键盘矩形的 DOMRect)和 lv(表示 文档视口 矩形的 DOMRect)作为输入,按以下步骤运行:
  1. osk 为屏幕键盘矩形,运行算法后得到的结果是show()hide()
  2. lv 为运行算法后得到的文档视口矩形show()hide()
  3. osk 映射到 lv 的坐标空间。
  4. boundsDOMRect 对象。
  5. 通过将 lvosk 相交来更新 bounds
  6. bounds 映射到 lv 的坐标空间。
  7. 返回 bounds

boundingRect getter 步骤为返回 thisboundingRect

ongeometrychange

当 VK 与文档视口的交集发生变化时(例如,响应 VK 显示或隐藏或浏览器窗口重新定位),会调度该事件。

4. 扩展 ElementContentEditable 混入

WebIDL partial interface mixin ElementContentEditable {
         [CEReactions] attribute DOMString virtualKeyboardPolicy;
    };
问题 1

添加 input 和 textarea 的处理。

virtualKeyboardPolicy 是一个枚举属性,其关键字包括 empty stringautomanual。IDL 属性必须反映同名的相应内容属性。 当指定在内容可编辑的主机元素上时,auto 会使相应的可编辑元素在聚焦或点击时自动显示 VK,而 manual 会将可编辑元素的焦点和点击与 VK 的当前状态分离——VK 保持原状。
除非从 auto 更改为 empty string 或反之,否则任何virtualKeyboardPolicy 属性值的更改都会否定当前定义的行为。

问题 2

指定相对于事件(如焦点)的时序。

5. 虚拟键盘可见性变化的 CSS 环境变量

VirtualKeyboard API 提议了六个新的 CSS 环境变量,Web 开发人员可以利用这些变量来计算虚拟键盘的大小,并以声明方式调整布局。

注意

这些 CSS 环境变量应添加到CSS 环境变量规范中。

5.1 键盘内边距变量

名称
keyboard-inset-top 长度
keyboard-inset-right 长度
keyboard-inset-bottom 长度
keyboard-inset-left 长度
keyboard-inset-width 长度
keyboard-inset-height 长度

键盘内边距是六个环境变量,它们通过从视口边缘的顶部、右侧、底部和左侧定义一个矩形。如果未提供备用值,则键盘内边距的默认值为 "0px",否则会在boundingRect 值更改时更新。 宽度和高度内边距是从剩余的内边距计算得出的,方便开发人员使用。

6. 示例

6.1 使用 VK 控制 API 的示例

6.2 使用 overlaysContent 和 geometry 事件的示例

下图和标记表示基于画布的电子表格,当 VK 显示时重新定位活动单元格。geometrychange 事件会触发画布的重绘请求。然后绘制代码可以使用 boundingRect 属性在正确的位置呈现活动单元格。 图示单触屏设备上的虚拟键盘

下图表示一个地图应用程序,它在一个窗口区域显示地图,在另一个窗口区域显示搜索结果。 使用有关窗口分段和媒体查询的提案,每当虚拟键盘出现在可折叠设备的左侧时,显示的搜索框将增加其下边距以保持可见。 图示单触屏设备上的虚拟键盘

7. 隐私和安全注意事项

由于 VirtualKeyboard API 可能会泄露用户 VK 布局的某些方面,用户代理必须确保不向脚本暴露任何它尚未通过现有 API 获得的额外信息。 为了减轻潜在的安全和隐私风险,浏览器应遵循以下最佳实践。

7.1 hide()show() 方法

用户代理必须仅允许在安全顶级浏览上下文中设置 overlaysContent

A. IDL 索引

WebIDLpartial interface Navigator {
        [SecureContext, SameObject] readonly attribute VirtualKeyboard virtualKeyboard;
    };
    
    [Exposed=Window, SecureContext]
    interface VirtualKeyboard : EventTarget {
        undefined show();
        undefined hide();
        readonly attribute DOMRect boundingRect;
        attribute boolean overlaysContent;
        attribute EventHandler ongeometrychange;
    };
    
     partial interface mixin ElementContentEditable {
         [CEReactions] attribute DOMString virtualKeyboardPolicy;
    };

B. 贡献者

编辑者注

添加贡献者

C. 参考文献

C.1 规范性引用

[dom]
DOM 标准. Anne van Kesteren. WHATWG. 现行标准. URL: https://dom.spec.whatwg.org/
[geometry-1]
几何接口模块 第 1 级. Simon Pieters; Chris Harrelson. W3C. 2018 年 12 月 4 日. W3C 候选推荐. URL: https://www.w3.org/TR/geometry-1/
[html]
HTML 标准. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. 现行标准. URL: https://html.spec.whatwg.org/multipage/
[RFC2119]
在 RFC 中表示需求级别的关键词. S. Bradner. IETF. 1997 年 3 月. 最佳当前实践. URL: https://www.rfc-editor.org/rfc/rfc2119
[RFC8174]
RFC 2119 关键字中大写与小写的歧义. B. Leiba. IETF. 2017 年 5 月. 最佳当前实践. URL: https://www.rfc-editor.org/rfc/rfc8174
[webidl]
Web IDL 标准. Edgar Chen; Timothy Gu. WHATWG. 现行标准. URL: https://webidl.spec.whatwg.org/