小程序如何处理键盘覆盖输入框（附代码）

本篇文章给大家带来的内容是关于小程序如何处理键盘覆盖输入框（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在移动端里,当输入框处于页面比较下方的时候回发生键盘覆盖输入框的情况,在小程序中也发生了类似情况,但小程序提供了一些api,但不能达到需求. 这里来简单说一下解决思路.

小程序的默认行为

在发生了键盘覆盖输入框的时候,在不操作任何api的情况下,小程序会把屏幕向上推,推到输入框正好在键盘上方的位置.

也就是如果不经过处理,小程序的键盘是不会覆盖输入框的. 但是在我的需求里这样还不够,因为页面上部分是需要持续展示的内容,不希望把页面向上推.

所以下面要通过小程序的api来解决这些问题.

cursor-spacing

在比较正常的UI设计中,输入框外面实际都会有一层wrapper,而很明显小程序是默认行为是不知道的,所以结果是会把这层wrapper的下半部分(输入框以下的)切掉. 那么就非常难看了.

引入这个apicursor-spacing,设多少,input下面就留多少. 这个数字应当是'输入框下边缘到wrapper结束的距离".

小程序的坑在于: 文档上的单位是错的,本来就需要试才知道这个属性的含义是什么,所以单位错导致无效果就让一(大)部分人放弃了. 正确的单位是带有单位的字符串. 例如10px或者100rpx.

adjust-position

刚才说到我的需求,我希望页面不向上推,而直接把输入框顶上来.

于是尝试了这个api. 默认是true,把他设为false. 效果变成了: 点了输入框,键盘完美覆盖输入框.

于是在加上cursor-spacing,发现这两个api是不能同时生效的.

所以最后结论是: 单纯用提供的api无法实现需求了. 所以只能监听事件自己做.

解决方案

手动操作输入框思路:

1. adjust-position设为false.

2. 在输入框的wrapper的bottom样式绑到本地数据,并设为absolute定位.

3. 在focus事件里改变输入框的位置.

4. 在blur事件里复原输入框的位置.

按照这个思路操作,遇到了几个问题:

如何确定输入框的位置

发现在bindfocus事件中可以获得键盘的高度,经过尝试,键盘的高度是以px为单位的. 所以直接把bottom的值设为px高度就行了.

如果输入框wrapper的相对定位不是页面底部,情况就比较复杂,若是用rpx为单位,需要获得屏幕宽高来计算px数,在不麻烦的情况下可以调整布局使wrapper相对于页面底部定位.

在改变style后输入框立即失去焦点

发生了这个情况后表现为: 点了输入框,输入框的wrapper闪一下又回原处. (因为失去焦点)

经过多次试验,需要做的是在绑定一个本地变量到focus属性.

然后用wx:if根据是否focus隐藏输入框,放一个假的输入框,点击以后使改变focus属性来唤起键盘.

实现的代码：https://github.com/cwj0417/step/blob/master/src/pages/did/index.vue

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!