标签：uniapp 微信 App 程序 键盘 软键盘 按键 uni
一、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 来源： https://www.cnblogs.com/moranjl/p/16639462.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。