Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang). W3C liability, trademark and permissive document license rules apply.
VirtualKeyboard
API 为开发者提供了更大的控制权,能够控制虚拟键盘 (VK)
的可见性,并能够更好地适应虚拟键盘可见性变化时网页布局的调整。
本节描述了本文档在发布时的状态。当前 W3C 出版物列表及本技术报告的最新修订版可在 W3C 技术报告索引找到,网址为 https://www.w3.org/TR/。
作为工作草案发布并不意味着 W3C 及其成员的认可。
本文档是草案,可能会随时更新、替换或被其他文档取代。引用本文档作为工作进展之外的用途是不合适的。
本文档由在 W3C 专利政策下运作的小组生成。 W3C 维护着与该小组交付成果相关的任何专利披露的公开列表;该页面还包括披露专利的说明。任何个人如果实际知晓其认为包含 基本专利声明 的专利,必须根据 W3C 专利政策第 6 节披露相关信息。
本文档受2021年11月2日 W3C 流程文档管辖。
本节是非规范性的。
虚拟键盘 (VK) 是用于输入的屏幕键盘,适用于没有硬件键盘的场景。用户代理在以下情况下响应 VK 的存在,但不会将此信息暴露给 Web 开发者: 1. 将用户代理重新定位到 VK 之上 2. 减小布局视口的大小,以确保 VK 不会遮挡它 3. 减小视觉视口的大小,并为布局视口增加内边距,以确保它可以移动到 VK 之上 该 API 提供了第四个选项,允许用户代理保持其布局和视觉视口不变,而是提供 VK 和布局视口的交集信息,以便作者可以使用 JavaScript 或 CSS 环境变量调整其网页的布局。
显示双屏设备上虚拟键盘的图像
显示单触摸屏设备上虚拟键盘的图像
除了标记为非规范性的部分外,本规范中的所有创作指南、图表、示例和注释均为非规范性的。本规范中的其他所有内容均为规范性的。
本文档中的关键字 必须 和 不得 应按照 BCP 14 [RFC2119] [RFC8174] 的描述进行解释,且仅在这些词汇以全大写形式出现时如此解释。
本规范定义的合规性标准适用于单一产品:实现了其包含的接口的用户代理。
以算法或特定步骤表述的合规性要求可以以任何方式实现,只要最终结果是等效的即可。(特别是,本规范中定义的算法旨在易于理解,而非为了高效运行。)
WebIDL
[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()
方法
该方法必须按照以下步骤执行:
Window
对象。
virtualKeyboardPolicy
不是 manual
或 inputMode
的
属性值为 none
,则中止这些步骤。
设置虚拟键盘边界矩形
,
使用键盘的操作系统报告的边界矩形和文档的
视口 矩形。
hide()
方法
该方法必须按照以下步骤执行:
Window
对象。
virtualKeyboardPolicy
不是 manual
或 inputMode
的
属性值为 none
,则中止这些步骤。
设置虚拟键盘边界矩形
,使用键盘的操作系统报告的边界矩形(全为 0 值)和 文档 的 视口 矩形。
一些人对显示担忧,关于 show
()
和 hide
()
方法不是基于 Promise
的,但我们认为 Web 开发者使用 ongeometrychange
事件的设计更好,因为它在 VK 可见性变化时触发,使返回值不必要。
overlaysContent
getter 步骤为返回
this 的 overlaysContent
。
overlaysContent
setter 步骤为将
this 的 overlaysContent
设置为给定值。
该属性报告 VK 与文档的 视口 在客户端坐标中的交集。调用 设置虚拟键盘边界矩形
。
设置虚拟键盘边界矩形
设置虚拟键盘边界矩形,使用 osk(表示屏幕键盘矩形的 DOMRect)和 lv(表示 文档的 视口 矩形的 DOMRect)作为输入,按以下步骤运行:show
()
或 hide
()
。
show
()
或 hide
()
。
DOMRect
对象。
boundingRect
getter 步骤为返回 this 的 boundingRect
。
ongeometrychange
WebIDL partial interface mixin ElementContentEditable
{
[CEReactions] attribute DOMString virtualKeyboardPolicy
;
};
添加 input 和 textarea 的处理。
virtualKeyboardPolicy
是一个枚举属性,其关键字包括
empty string
、auto
和
manual
。IDL 属性必须反映同名的相应内容属性。
当指定在内容可编辑的主机元素上时,auto
会使相应的可编辑元素在聚焦或点击时自动显示 VK,而 manual
会将可编辑元素的焦点和点击与 VK 的当前状态分离——VK 保持原状。
除非从 auto
更改为 empty string
或反之,否则任何virtualKeyboardPolicy
属性值的更改都会否定当前定义的行为。
指定相对于事件(如焦点)的时序。
VirtualKeyboard
API 提议了六个新的 CSS 环境变量,Web
开发人员可以利用这些变量来计算虚拟键盘的大小,并以声明方式调整布局。
这些 CSS 环境变量应添加到CSS 环境变量规范中。
名称 | 值 |
---|---|
keyboard-inset-top | 长度 |
keyboard-inset-right | 长度 |
keyboard-inset-bottom | 长度 |
keyboard-inset-left | 长度 |
keyboard-inset-width | 长度 |
keyboard-inset-height | 长度 |
键盘内边距是六个环境变量,它们通过从视口边缘的顶部、右侧、底部和左侧定义一个矩形。如果未提供备用值,则键盘内边距的默认值为
"0px",否则会在boundingRect
值更改时更新。
宽度和高度内边距是从剩余的内边距计算得出的,方便开发人员使用。
下图和标记表示基于画布的电子表格,当 VK 显示时重新定位活动单元格。geometrychange
事件会触发画布的重绘请求。然后绘制代码可以使用
boundingRect
属性在正确的位置呈现活动单元格。
boundingRect
,overlaysContent
和 ongeometrychange
属性
overlaysContent
。
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
;
};
添加贡献者
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in: