uniapp 隐藏、获取键盘，及调整键盘按键 |
您所在的位置：网站首页 › 怎么调用虚拟键盘 › 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 √ xOBJECT 参数说明： 参数名 类型 默认值 必填 说明 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() |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |