小程序如何处理键盘覆盖输入框

柔光的暖阳◎ 2022-04-10 06:24 354阅读 0赞

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

## 小程序的默认行为 ##

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

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

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

## cursor-spacing ##

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

引入这个api`cursor-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属性来唤起键盘.

贴一份[实现的代码][Link 1].

来源：[https://segmentfault.com/a/1190000017538064][https_segmentfault.com_a_1190000017538064]

[Link 1]: https://github.com/cwj0417/step/blob/master/src/pages/did/index.vue
[https_segmentfault.com_a_1190000017538064]: https://segmentfault.com/a/1190000017538064

发表评论取消回复

表情：

评论列表（有 0 条评论，354人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序自动化测试-输入框输入中文

1.下载并安装ADBKeyboard.apk [下载地址][Link 1] 2.勾选键盘ADBKeyboard ![watermark_type_ZmFuZ3poZW5n

你的名字/ 2022年11月29日 03:07/ 0 赞/ 239 阅读

相关处理键盘输入

指定键盘类型 android:inputType = "phone | textPassword | textMultiLine | text" andr

我会带着你远行/ 2022年07月16日 13:23/ 0 赞/ 321 阅读

相关 h5键盘遮挡输入框

1. h5嵌入到原生时，输入框获取焦点会调起键盘，如果不作处理键盘有可能会遮挡住输入框。不引入插件前提下的解决方案大多是这两种：scrollintoviewif

刺骨的言语ヽ痛彻心扉/ 2022年06月17日 13:52/ 0 赞/ 295 阅读

相关小程序输入框取值、清空及调用小键盘按键提交事件详解

小程序input取值一般情况下，输入框可以直接通过value来取值和更改 <input class='leftMove' value='{

╰+攻爆jí腚メ/ 2022年05月05日 15:58/ 0 赞/ 1628 阅读

相关小程序如何处理键盘覆盖输入框

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

柔光的暖阳◎/ 2022年04月10日 06:24/ 0 赞/ 355 阅读

相关 python处理键盘输入

x = int(input()) m, n = map(int, input().split()) nums = list(map(int, input

女爷i/ 2022年03月31日 06:46/ 0 赞/ 351 阅读

相关小程序input输入框键盘弹出使得布局上移问题

注意点： 1.style='bottom:\{ \{inputBottom\}\}px'单位用px 2.input的 adjust-position='\{ \{false

- 日理万妓/ 2022年02月13日 18:51/ 0 赞/ 629 阅读

相关 Android: 软键盘挡住输入框问题

Android: 软键盘挡住输入框问题 windowSoftInputMode [Android爬坑之旅：软键盘挡住输入框问题的终极解决方案][Android] [h

谁践踏了优雅/ 2022年02月04日 05:21/ 0 赞/ 343 阅读

相关监听input输入框键盘输入的方法

html <div class="div1"> <input type="text" placeholder="输入姓名" maxlength="5" cl

缺乏、安全感/ 2021年11月29日 16:44/ 0 赞/ 616 阅读

相关小程序固定底部悬浮输入框，跟随键盘移动解决方案

为了实现小程序底部固定悬浮的评论输入框，实现过程中，键盘弹起有很多交互问题，解决过程记录一下。先上效果图： ![watermark_type_ZmFuZ3poZW5naG

悠悠/ 2021年11月23日 03:34/ 0 赞/ 1425 阅读