code学习

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()

蓦然、回首,那人就在灯火阑珊处