键盘/h1>
在构建移动应用程序和PWA时,定制和核算存在屏幕键盘的存在是两个常见的障碍开发人员面临的。本指南将介绍用于管理应用程序中屏幕键盘的各种工具。//p>
输入模式/a>
这
输入模式/code>
属性允许开发人员指定可以将哪种类型的数据输入到输入中。这将提示浏览器显示一个键盘,其中包含与用户可能输入的按钮相关的按钮。例如,
InputMode =“电子邮件”/code>
将显示带有的键盘
@//code>
键以及其他用于输入电子邮件的优化。/p>
自从
输入模式/code>
是一个全局属性,可以用于离子组件,例如betway东盟体育app
离子输入/code>
和
离子textarea/code>
除了常规输入元素。/p>
输入
要求/em>
某种数据类型应使用
类型/code>
属性。例如,需要电子邮件的输入应使用
type =“电子邮件”/code>
而不是指定一个
输入模式。/code>
这是因为将要输入的数据总是以电子邮件的形式出现。另一方面,如果输入接受电子邮件或用户名,请使用
InputMode =“电子邮件”/code>
是适当的,因为要输入的数据并不总是是电子邮件地址。/p>
有关公认值列表,请参阅
InputMode文档/a>
。/p>
用法/a>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
用户名或电子邮件
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
输入模式/span>
=//span>
“/span>
电子邮件
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入号码
//span>
离子标签/span>
>//span>
<//span>
离子textarea/span>
输入模式/span>
=//span>
“/span>
数字
“/span>
>//span>
//span>
离子textarea/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
用户名或电子邮件
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
输入模式/span>
=//span>
“/span>
电子邮件
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入号码
//span>
离子标签/span>
>//span>
<//span>
离子textarea/span>
输入模式/span>
=//span>
“/span>
数字
“/span>
>//span>
//span>
离子textarea/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子/span>
>//span>
<//span>
离子标签/span>
>//span>
用户名或电子邮件
//span>
离子标签/span>
>//span>
<//span>
离子引流/span>
输入模式/span>
=//span>
“/span>
电子邮件
“/span>
>//span>
//span>
离子引流/span>
>//span>
//span>
离子/span>
>//span>
<//span>
离子/span>
>//span>
<//span>
离子标签/span>
>//span>
输入号码
//span>
离子标签/span>
>//span>
<//span>
离子文素/span>
输入模式/span>
=//span>
“/span>
数字
“/span>
>//span>
//span>
离子文素/span>
>//span>
//span>
离子/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
用户名或电子邮件
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
输入模式/span>
=//span>
“/span>
电子邮件
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入号码
//span>
离子标签/span>
>//span>
<//span>
离子textarea/span>
输入模式/span>
=//span>
“/span>
数字
“/span>
>//span>
//span>
离子textarea/span>
>//span>
//span>
离子项目/span>
>//span>
这
输入模式/code>
属性在运行Chrome 66+和iOS Safari 12.2+的设备上支持:
https://caniuse.com/#search=inputmode/a>
EnterKeyHint/a>
这
EnterKeyHint/code>
属性允许开发人员为“ Enter”键指定应显示哪种类型的操作标签或图标。使用
EnterKeyHint/code>
让用户点击“ Enter”密钥时会发生什么。此处应指定的值取决于用户正在做的事情的上下文。例如,如果用户输入搜索框,则开发人员应确保输入已有
EnterKeyHint =“搜索”/code>
。/p>
自从
EnterKeyHint/code>
是一个全局属性,可以用于离子组件,例如betway东盟体育app
离子输入/code>
和
离子textarea/code>
除了常规输入元素。/p>
有关公认值列表,请参阅
EnterKeyHint标准/a>
。/p>
用法/a>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入搜索查询
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
EnterKeyHint/span>
=//span>
“/span>
搜索
“/span>
类型/span>
=//span>
“/span>
搜索
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入搜索查询
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
EnterKeyHint/span>
=//span>
“/span>
搜索
“/span>
类型/span>
=//span>
“/span>
搜索
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子/span>
>//span>
<//span>
离子标签/span>
>//span>
输入搜索查询
//span>
离子标签/span>
>//span>
<//span>
离子引流/span>
EnterKeyHint/span>
=//span>
“/span>
搜索
“/span>
类型/span>
=//span>
“/span>
搜索
“/span>
>//span>
//span>
离子引流/span>
>//span>
//span>
离子/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入搜索查询
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
EnterKeyHint/span>
=//span>
“/span>
搜索
“/span>
类型/span>
=//span>
“/span>
搜索
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
这
EnterKeyHint/code>
属性在运行Chrome 77+和iOS Safari 13.4+的设备上支持。/p>
黑暗模式/a>
默认情况下,键盘主题由OS确定。例如,如果在iOS上启用了黑暗模式,则应用程序中的键盘即使您的CSS中没有深色主题,也会以深色主题出现。//p>
在移动网络浏览器或作为PWA中运行应用程序时,无法强迫键盘出现特定主题。/p>
在电容器或Cordova运行应用程序时,可以强迫键盘出现特定主题。有关此配置的更多信息,请参见
电容器键盘文档/a>
。/p>
隐藏附件栏/a>
运行任何基于Web的应用程序时,iOS将在键盘上方显示附件栏。这使用户可以移至下一个或上一个输入以及关闭键盘。//p>
在移动Web浏览器或PWA中运行应用程序时,无法隐藏附件栏。/p>
在电容器或Cordova运行应用程序时,可以隐藏附件栏。有关此配置的更多信息,请参见
电容器键盘文档/a>
。/p>
键盘生命周期事件/a>
检测屏幕键盘的存在对于调整键盘将隐藏的输入的定位很有用。对于电容器和Cordova应用程序,开发人员通常依靠本机键盘插件来收听键盘生命周期事件。对于在移动浏览器或PWA中运行的应用程序,开发人员可以使用
Visual ViewPort API/a>
在哪里支持。betway东盟体育app离子框架包装了这两种方法并发出
IonkeyboardDidshow/code>
和
ionkeyboardDidhide/code>
事件
窗户/code>
。事件有效载荷
IonkeyboardDidshow/code>
包含像素中键盘高度的近似值。/p>
用法/a>
窗户
。/span>
AddEventListener/span>
((/span>
'ionkeyboarddidshow'/span>
,,,,/span>
ev/span>
=>/span>
{//span>
const/span>
{//span>
键盘高
}//span>
=//span>
ev
;/span>
//用键盘高度做某事,例如在键盘上方翻译输入。/span>
}//span>
)/span>
;/span>
窗户
。/span>
AddEventListener/span>
((/span>
'ionkeyboardDidhide'/span>
,,,,/span>
((/span>
)/span>
=>/span>
{//span>
//将输入移回原始位置/span>
}//span>
)/span>
;/span>
进口/span>
{//span>
平台
}//span>
从/span>
'@betway东盟体育appionic/angular'/span>
;/span>
.../span>
构造函数/span>
((/span>
私人的/span>
平台
:/span>
平台/span>
)/span>
{//span>
这/span>
。/span>
平台
。/span>
键盘DIDSHOW
。/span>
订阅/span>
((/span>
ev/span>
=>/span>
{//span>
const/span>
{//span>
键盘高
}//span>
=//span>
ev
;/span>
//用键盘高度做某事,例如在键盘上方翻译输入。/span>
}//span>
)/span>
;/span>
这/span>
。/span>
平台
。/span>
键盘迪海德
。/span>
订阅/span>
((/span>
((/span>
)/span>
=>/span>
{//span>
//将输入移回原始位置/span>
}//span>
)/span>
;/span>
}//span>
进口/span>
{//span>
useKeyboardState
}//span>
从/span>
'@betway东盟体育appionic/react-hooks/键盘'/span>
;/span>
.../span>
const/span>
{//span>
开了
,,,,/span>
键盘高
}//span>
=//span>
useKeyboardState/span>
((/span>
)/span>
;/span>
//用键盘高度做某事,例如在键盘上方翻译输入/span>
进口/span>
{//span>
UseKeyboard
}//span>
从/span>
'@betway东盟体育appionic/vue'/span>
;/span>
进口/span>
{//span>
手表
}//span>
从/span>
'vue'/span>
;/span>
.../span>
const/span>
{//span>
开了
,,,,/span>
键盘高
}//span>
=//span>
UseKeyboard/span>
((/span>
)/span>
;/span>
手表/span>
((/span>
键盘高
,,,,/span>
((/span>
)/span>
=>/span>
{//span>
安慰/span>
。/span>
日志/span>
((/span>
`//span>
键盘打开:/span>
$ {/span>
开了
。/span>
价值
}//span>
,键盘高度:/span>
$ {/span>
键盘高
。/span>
价值
}//span>
`//span>
)/span>
;/span>
}//span>
)/span>
;/span>
对于在移动Web浏览器或PWA中运行的应用程序,仅在Chrome 62+和iOS Safari 13.0+上支持键盘生命周期事件。/p>
以前的/div>
硬件后按钮/span>
在构建移动应用程序和PWA时,定制和核算存在屏幕键盘的存在是两个常见的障碍开发人员面临的。本指南将介绍用于管理应用程序中屏幕键盘的各种工具。//p>
输入模式/a>
这
自从
输入
要求/em>
某种数据类型应使用
有关公认值列表,请参阅
InputMode文档/a>
。/p>
这
这
自从
有关公认值列表,请参阅
EnterKeyHint标准/a>
。/p>
这
默认情况下,键盘主题由OS确定。例如,如果在iOS上启用了黑暗模式,则应用程序中的键盘即使您的CSS中没有深色主题,也会以深色主题出现。//p>
在移动网络浏览器或作为PWA中运行应用程序时,无法强迫键盘出现特定主题。/p>
在电容器或Cordova运行应用程序时,可以强迫键盘出现特定主题。有关此配置的更多信息,请参见
电容器键盘文档/a>
。/p>
运行任何基于Web的应用程序时,iOS将在键盘上方显示附件栏。这使用户可以移至下一个或上一个输入以及关闭键盘。//p>
在移动Web浏览器或PWA中运行应用程序时,无法隐藏附件栏。/p>
在电容器或Cordova运行应用程序时,可以隐藏附件栏。有关此配置的更多信息,请参见
电容器键盘文档/a>
。/p>
检测屏幕键盘的存在对于调整键盘将隐藏的输入的定位很有用。对于电容器和Cordova应用程序,开发人员通常依靠本机键盘插件来收听键盘生命周期事件。对于在移动浏览器或PWA中运行的应用程序,开发人员可以使用
Visual ViewPort API/a>
在哪里支持。betway东盟体育app离子框架包装了这两种方法并发出
对于在移动Web浏览器或PWA中运行的应用程序,仅在Chrome 62+和iOS Safari 13.0+上支持键盘生命周期事件。/p>
输入模式/code>
属性允许开发人员指定可以将哪种类型的数据输入到输入中。这将提示浏览器显示一个键盘,其中包含与用户可能输入的按钮相关的按钮。例如,
InputMode =“电子邮件”/code>
将显示带有的键盘
@//code>
键以及其他用于输入电子邮件的优化。/p>
输入模式/code>
是一个全局属性,可以用于离子组件,例如betway东盟体育app
离子输入/code>
和
离子textarea/code>
除了常规输入元素。/p>
类型/code>
属性。例如,需要电子邮件的输入应使用
type =“电子邮件”/code>
而不是指定一个
输入模式。/code>
这是因为将要输入的数据总是以电子邮件的形式出现。另一方面,如果输入接受电子邮件或用户名,请使用
InputMode =“电子邮件”/code>
是适当的,因为要输入的数据并不总是是电子邮件地址。/p>
用法/a>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
用户名或电子邮件
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
输入模式/span>
=//span>
“/span>
电子邮件
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入号码
//span>
离子标签/span>
>//span>
<//span>
离子textarea/span>
输入模式/span>
=//span>
“/span>
数字
“/span>
>//span>
//span>
离子textarea/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
用户名或电子邮件
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
输入模式/span>
=//span>
“/span>
电子邮件
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入号码
//span>
离子标签/span>
>//span>
<//span>
离子textarea/span>
输入模式/span>
=//span>
“/span>
数字
“/span>
>//span>
//span>
离子textarea/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子/span>
>//span>
<//span>
离子标签/span>
>//span>
用户名或电子邮件
//span>
离子标签/span>
>//span>
<//span>
离子引流/span>
输入模式/span>
=//span>
“/span>
电子邮件
“/span>
>//span>
//span>
离子引流/span>
>//span>
//span>
离子/span>
>//span>
<//span>
离子/span>
>//span>
<//span>
离子标签/span>
>//span>
输入号码
//span>
离子标签/span>
>//span>
<//span>
离子文素/span>
输入模式/span>
=//span>
“/span>
数字
“/span>
>//span>
//span>
离子文素/span>
>//span>
//span>
离子/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
用户名或电子邮件
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
输入模式/span>
=//span>
“/span>
电子邮件
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入号码
//span>
离子标签/span>
>//span>
<//span>
离子textarea/span>
输入模式/span>
=//span>
“/span>
数字
“/span>
>//span>
//span>
离子textarea/span>
>//span>
//span>
离子项目/span>
>//span>
输入模式/code>
属性在运行Chrome 66+和iOS Safari 12.2+的设备上支持:
https://caniuse.com/#search=inputmode/a>
EnterKeyHint/a>
EnterKeyHint/code>
属性允许开发人员为“ Enter”键指定应显示哪种类型的操作标签或图标。使用
EnterKeyHint/code>
让用户点击“ Enter”密钥时会发生什么。此处应指定的值取决于用户正在做的事情的上下文。例如,如果用户输入搜索框,则开发人员应确保输入已有
EnterKeyHint =“搜索”/code>
。/p>
EnterKeyHint/code>
是一个全局属性,可以用于离子组件,例如betway东盟体育app
离子输入/code>
和
离子textarea/code>
除了常规输入元素。/p>
用法/a>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入搜索查询
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
EnterKeyHint/span>
=//span>
“/span>
搜索
“/span>
类型/span>
=//span>
“/span>
搜索
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入搜索查询
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
EnterKeyHint/span>
=//span>
“/span>
搜索
“/span>
类型/span>
=//span>
“/span>
搜索
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子/span>
>//span>
<//span>
离子标签/span>
>//span>
输入搜索查询
//span>
离子标签/span>
>//span>
<//span>
离子引流/span>
EnterKeyHint/span>
=//span>
“/span>
搜索
“/span>
类型/span>
=//span>
“/span>
搜索
“/span>
>//span>
//span>
离子引流/span>
>//span>
//span>
离子/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
输入搜索查询
//span>
离子标签/span>
>//span>
<//span>
离子输入/span>
EnterKeyHint/span>
=//span>
“/span>
搜索
“/span>
类型/span>
=//span>
“/span>
搜索
“/span>
>//span>
//span>
离子输入/span>
>//span>
//span>
离子项目/span>
>//span>
EnterKeyHint/code>
属性在运行Chrome 77+和iOS Safari 13.4+的设备上支持。/p>
黑暗模式/a>
隐藏附件栏/a>
键盘生命周期事件/a>
IonkeyboardDidshow/code>
和
ionkeyboardDidhide/code>
事件
窗户/code>
。事件有效载荷
IonkeyboardDidshow/code>
包含像素中键盘高度的近似值。/p>
用法/a>
窗户
。/span>
AddEventListener/span>
((/span>
'ionkeyboarddidshow'/span>
,,,,/span>
ev/span>
=>/span>
{//span>
const/span>
{//span>
键盘高
}//span>
=//span>
ev
;/span>
//用键盘高度做某事,例如在键盘上方翻译输入。/span>
}//span>
)/span>
;/span>
窗户
。/span>
AddEventListener/span>
((/span>
'ionkeyboardDidhide'/span>
,,,,/span>
((/span>
)/span>
=>/span>
{//span>
//将输入移回原始位置/span>
}//span>
)/span>
;/span>
进口/span>
{//span>
平台
}//span>
从/span>
'@betway东盟体育appionic/angular'/span>
;/span>
.../span>
构造函数/span>
((/span>
私人的/span>
平台
:/span>
平台/span>
)/span>
{//span>
这/span>
。/span>
平台
。/span>
键盘DIDSHOW
。/span>
订阅/span>
((/span>
ev/span>
=>/span>
{//span>
const/span>
{//span>
键盘高
}//span>
=//span>
ev
;/span>
//用键盘高度做某事,例如在键盘上方翻译输入。/span>
}//span>
)/span>
;/span>
这/span>
。/span>
平台
。/span>
键盘迪海德
。/span>
订阅/span>
((/span>
((/span>
)/span>
=>/span>
{//span>
//将输入移回原始位置/span>
}//span>
)/span>
;/span>
}//span>
进口/span>
{//span>
useKeyboardState
}//span>
从/span>
'@betway东盟体育appionic/react-hooks/键盘'/span>
;/span>
.../span>
const/span>
{//span>
开了
,,,,/span>
键盘高
}//span>
=//span>
useKeyboardState/span>
((/span>
)/span>
;/span>
//用键盘高度做某事,例如在键盘上方翻译输入/span>
进口/span>
{//span>
UseKeyboard
}//span>
从/span>
'@betway东盟体育appionic/vue'/span>
;/span>
进口/span>
{//span>
手表
}//span>
从/span>
'vue'/span>
;/span>
.../span>
const/span>
{//span>
开了
,,,,/span>
键盘高
}//span>
=//span>
UseKeyboard/span>
((/span>
)/span>
;/span>
手表/span>
((/span>
键盘高
,,,,/span>
((/span>
)/span>
=>/span>
{//span>
安慰/span>
。/span>
日志/span>
((/span>
`//span>
键盘打开:/span>
$ {/span>
开了
。/span>
价值
}//span>
,键盘高度:/span>
$ {/span>
键盘高
。/span>
价值
}//span>
`//span>
)/span>
;/span>
}//span>
)/span>
;/span>