一、uni.hideKeyboard()
隐藏软键盘
隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序、飞书小程序 | QQ小程序 | 快手小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | x | √ | √ | √ | √ |
二、uni.onKeyboardHeightChange(CALLBACK)
监听键盘高度变化
平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序、飞书小程序 | QQ小程序 | 快手小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|
| HBuilderX 2.2.3+ | x | 基础库2.7+ | x | x | x | √ | √ | √ |
CALLBACK 返回参数
| 参数 | 类型 | 说明 |
|---|---|---|
| height | Number | 键盘高度 |
示例代码
uni.onKeyboardHeightChange(res => {
console.log(res.height)
})三、uni.offKeyboardHeightChange(CALLBACK)
取消监听键盘高度变化事件
平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序、飞书小程序 | QQ小程序 | 快手小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|
| HBuilderX 3.1.0+ | x | 基础库2.9.2+ | x | x | x | x | x | √ |
示例代码
uni.offKeyboardHeightChange(callback)四、uni.getSelectedTextRange(OBJECT)
在input、textarea等focus之后，获取输入框的光标位置。注意：只有在focus的时候调用此接口才有效。目前仅支持 vue 页面，nvue 可以直接使用 weex 的 getSelectionRange (opens new window)。
平台差异说明
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序、飞书小程序 | QQ小程序 | 快手小程序 | 京东小程序 |
|---|---|---|---|---|---|---|---|---|
| HBuilderX 2.8.12+ | HBuilderX 2.8.12+ | 基础库 2.7.0+ | x | x | x | x | √ | x |
OBJECT 参数说明：
| 参数名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| success | Function | 否 | 接口调用成功的回调函数 | |
| fail | Function | 否 | 接口调用失败的回调函数 | |
| complete | Function | 否 | 接口调用结束的回调函数（调用成功、失败都会执行） |
success 返回参数说明：
| 属性 | 类型 | 说明 |
|---|---|---|
| start | Number | 输入框光标起始位置 |
| end | Number | 输入框光标结束位置 |
示例代码
uni.getSelectedTextRange({
success: res => {
console.log('getSelectedTextRange res', res.start, res.end)
}
})五、影响键盘类型
input组件的 type有效值 和 confirm-type有效值 ，影响键盘样式
type 有效值
| 值 | 说明 | 平台差异说明 |
|---|---|---|
| text | 文本输入键盘 | |
| number | 数字输入键盘 | 均支持，App平台、H5平台 3.1.22 以下版本 vue 页面在 iOS 平台显示的键盘包含负数和小数。 |
| idcard | 身份证输入键盘 | 微信、支付宝、百度、QQ小程序、快手小程序、京东小程序 |
| digit | 带小数点的数字键盘 | 均支持，App平台、H5平台 vue 页面在 iOS 平台显示的键盘包含负数。 |
| tel | 电话输入键盘 | 仅App的nvue页面支持 |
| safe-password | 密码安全输入键盘 | 微信小程序 |
| nickname | 昵称输入键盘 | 微信小程序 |
confirm-type 有效值
| 值 | 说明 | 平台差异说明 |
|---|---|---|
| send | 右下角按钮为“发送” | 微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+) |
| search | 右下角按钮为“搜索” | |
| next | 右下角按钮为“下一个” | 微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+) |
| go | 右下角按钮为“前往” | |
| done | 右下角按钮为“完成” | 微信、支付宝、百度小程序、快手小程序、京东小程序、app-nvue、app-vue和h5(2.9.9+，且要求设备webview内核Chrome81+、Safari13.7+) |
六、App平台iOS端软键盘上方横条去除方案
App平台在iOS上，webview中的软键盘弹出时，默认在软键盘上方有一个横条，显示着：上一项、下一项和完成等按钮。如不想显示这个横条，可以配置softinputNavBar: 'none'
配置方式，在 pages.json 中配置 style
"app-plus": {
"softinputNavBar": "none"
}- 如需使用js动态设置softinputNavBar
this.$scope.$getAppWebview().setStyle({
softinputNavBar: 'none'
})
//this.$scope.$getAppWebview()相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效如果是nvue页面，iOS默认就没有键盘上方的横条，无需任何设置。
#关于软键盘弹出的逻辑说明
App平台软键盘弹出有 adjustResize|adjustPan 两种模式，默认为 adjustPan 模式，小程序平台只支持 adjustPan 模式，H5平台因不同浏览器而异
- adjustResize：软键盘弹出时，webview窗体高度挤压。屏幕高度=webview窗体高度+软键盘高度
- adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住
配置方式，在 pages.json 中配置 style
"app-plus": {
"softinputMode": "adjustResize"
}注意
- adjustResize模式在Android App上，弹起键盘和收回键盘时，因为要重设webview窗体高度，可能会在个别安卓机型闪现灰屏或漏出下层页面内容。
- 小程序端在 input 聚焦期间，避免使用 css 动画。
- H5平台只能在用户交互时修改 focus 生效。
- 如果遇到 focus 属性设置不生效的问题参考：组件属性设置不生效解决办法
- 如需禁止点击其他位置收起键盘的默认行为，可以监听
touch事件并使用prevent修饰符（仅支持App、H5，其他平台可以通过设置focus来使输入框重新获取焦点），例如在确认按钮上使用：@touchend.prevent="onTap"
#关于软键盘收起的逻辑说明
- Android上在软键盘弹出后，点击back或点击非置焦区域可收起软键盘。
- iOS上如果软键盘上方有带有“完成”的横条，则需要点完成才能收起键盘；如果没有软键盘上方横条，则点击非input/textarea区域即可收起软键盘
以上为默认逻辑，uni-app同时提供了隐藏软键盘的api：uni.hideKeyboard()
标签：uniapp,微信,App,程序,键盘,软键盘,按键,uni From： https://www.cnblogs.com/moranjl/p/16639462.html