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

在移动端里, 当输入框处于页面比较下方的时候回发生键盘覆盖输入框的状况, 在小程序中也发生了相似状况, 但小程序提供了一些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属性来唤起键盘.

贴一份实现的代码.

原文地址