学习总结——小程序中输入框和键盘的那些事

【背景】最近做了几个需求，涉及在小程序中蒙层或者其他固定布局中使用输入框（input），然后光标放置的时候移动端键盘弹起，会影响页面本来的布局设置，dom整体会被键盘整体顶起来

【问题解决】

调研了一下，这种情况有两种解决方式

1、设置input属性，让键盘顶起不影响页面

【步骤】搜索小程序的文档，input的属性（文档搬运工，微信小程序input | 微信开放文档，百度小程序百度智能小程序文档）

设置adjust-position为false，键盘弹起不会上推页面

【优点】解决了dom上移的问题

【缺点】输入框会被键盘遮挡住，太长的输入时，用户不回收键盘无法看到自己输入的内容。

如果是比较简短的字词搜索可以使用此方式

2、在1的基础上，结合定位和focus属性和小程序获取键盘高度的方法，根据键盘弹起的高度，设置输入框的定位，视觉上就是input框始终位于键盘的上方。

【步骤】

（1）设置1中提到的adjust-position为false，键盘弹起不会上推页面，

（2）解决遮挡的问题，input我们设置fixed的定位，当键盘弹起时，底部增加相应的高度，不影响整体dom的显示，同时达到了露出输入框的目的，需要使用以下方法监听键盘高度变化，获取键盘高度（感谢小程序提供的丰富的api）

微信小程序，直接给input绑定事件即可获取input | 微信开放文档

百度小程序，需要给监听input的focus事件，百度智能小程序文档（或者直接监听键盘高度也行，毕竟不打字键盘怎么会变化，对不对），我是用的focus事件

然后需要在全局（onShow，onHide，onInit我觉得都可以，加了就行，性能自己看一下）添加监听事件，弹出会自动触发swan.onKeyboardHeightChange 获取键盘高度，百度智能小程序文档

        swan.onKeyboardHeightChange(res => {this.setData({keyboardHeight: res.height});});

获取到键盘高度之后，给fixed的input控件添加一个动态样式:style="{bottom: keyboardHeight+'px'}"，完成~

学习总结——小程序中输入框和键盘的那些事相关推荐

在微信小程序中使用“随机键盘”
最近研究微信小程序,发现在手机上使用系统键盘非常不方便,一是按键太小,对于小学生来说,操作非常不方便:二是系统键盘反复切换影响界面布局.于是自己决定自己写一个随机的小键盘. 原理非常简单:拿" ...
小程序中confirm-type设置键盘的确认按钮
介绍 confirm-type是很多小程序组件中的一种设置,用于改变输入键盘右下角的确认按钮.比如说,正常情况下,键盘上的默认提示可能是完成,但是你可以通过confirm-type将其设置为发送,搜索 ...
小程序中输入框input的type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
小程序中所有组件学习
视图容器 view 视图容器属性名类型默认值说明最低版本 hover-class String none 指定按下去的样式类.当 hover-class="none" 时 ...
在微信小程序中做自己的数字键盘
在微信小程序中做自己的数字键盘为什么要自制键盘? 使用系统键盘带来的不便理想的自制键盘效果怎样自制键盘? 键盘的效果为什么要自制键盘? 我最近在开发一款微信小程序,现在需要用户输入一个数字. ...
六一：如何在Datawhale开源学习小程序中管
我们的组队学习马上就要开营了,本次组队学习与以往不同的是小程序中增加了队伍管理的功能. 为了方便大家组队,Datawhale的六一同学为大家准备了在Datawhale开源学习小程序中队伍管理的教程 ...
如何在Datawhale开源学习小程序中创建队伍？
我们的组队学习马上就要开营了,本次组队学习与以往不同的是小程序中增加了组队的功能.为了方便大家组队,Datawhale的六一同学为大家准备了在Datawhale开源学习小程序中创建队伍的教程. S ...
如何在微信小程序中实现具有@功能的输入框
你可以直接从npm中下载组件使用: npm - yun-ui-micro 中的 atinput 组件.也可通过本文代码二次修改. 展示背景像微信群聊.微博的输入框中输入"@"符 ...
ios微信小程序中 input 输入框问题，输入的光标中的内容自动清空
ios微信小程序中 input 输入框问题,输入的光标中的内容自动清空问题描述 1.我在页面上有个倒计时的功能,每一秒都在更新时间,更新时间显示的值(view一直变) 2.我调用input输入框,准 ...
跳一跳微信小程序中的跳一跳相信大家都玩过。emmm？？？只学习不玩游戏？那就吃亏了...好好读题理解吧简化后的跳一跳规则如下：玩家每次从当前方块跳到下一个方块，如果没有跳到下一个方块上则游
3 跳一跳微信小程序中的跳一跳相信大家都玩过.emmm???只学习不玩游戏?那就吃亏了-好好读题理解吧. 简化后的跳一跳规则如下:玩家每次从当前方块跳到下一个方块,如果没有跳到下一个方块上则游戏结束 ...

学习总结——小程序中输入框和键盘的那些事

学习总结——小程序中输入框和键盘的那些事相关推荐

最新文章

热门文章