uniapp 隐藏、获取键盘，及调整键盘按键

一、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