共计 1122 个字符，预计需要花费 3 分钟才能阅读完成。
在移动端里, 当输入框处于页面比较下方的时候回发生键盘覆盖输入框的情况, 在小程序中也发生了类似情况, 但小程序提供了一些 api, 但不能达到需求. 这里来简单说一下解决思路.
小程序的默认行为
在发生了键盘覆盖输入框的时候, 在不操作任何 api 的情况下, 小程序会把屏幕向上推, 推到输入框正好在键盘上方的位置.
也就是如果不经过处理, 小程序的键盘是不会覆盖输入框的. 但是在我的需求里这样还不够, 因为页面上部分是需要持续展示的内容, 不希望把页面向上推.
所以下面要通过小程序的 api 来解决这些问题.
cursor-spacing
在比较正常的 UI 设计中, 输入框外面实际都会有一层 wrapper, 而很明显小程序是默认行为是不知道的, 所以结果是会把这层 wrapper 的下半部分 (输入框以下的) 切掉. 那么就非常难看了.
引入这个 apicursor-spacing, 设多少, input 下面就留多少. 这个数字应当是 ’ 输入框下边缘到 wrapper 结束的距离 ”.
小程序的坑在于: 文档上的单位是错的, 本来就需要试才知道这个属性的含义是什么, 所以单位错导致无效果就让一 (大) 部分人放弃了. 正确的单位是带有单位的字符串. 例如 10px 或者 100rpx.
adjust-position
刚才说到我的需求, 我希望页面不向上推, 而直接把输入框顶上来.
于是尝试了这个 api. 默认是 true, 把他设为 false. 效果变成了: 点了输入框, 键盘完美覆盖输入框.
于是在加上 cursor-spacing, 发现这两个 api 是不能同时生效的.
所以最后结论是: 单纯用提供的 api 无法实现需求了. 所以只能监听事件自己做.
解决方案
手动操作输入框思路:
adjust-position 设为 false.
在输入框的 wrapper 的 bottom 样式绑到本地数据, 并设为 absolute 定位.
在 focus 事件里改变输入框的位置.
在 blur 事件里复原输入框的位置.
按照这个思路操作, 遇到了几个问题:
如何确定输入框的位置
发现在 bindfocus 事件中可以获得键盘的高度, 经过尝试, 键盘的高度是以 px 为单位的. 所以直接把 bottom 的值设为 px 高度就行了.
如果输入框 wrapper 的相对定位不是页面底部, 情况就比较复杂, 若是用 rpx 为单位, 需要获得屏幕宽高来计算 px 数, 在不麻烦的情况下可以调整布局使 wrapper 相对于页面底部定位.
在改变 style 后输入框立即失去焦点
发生了这个情况后表现为: 点了输入框, 输入框的 wrapper 闪一下又回原处. (因为失去焦点)
经过多次试验, 需要做的是在绑定一个本地变量到 focus 属性.
然后用 wx:if 根据是否 focus 隐藏输入框, 放一个假的输入框, 点击以后使改变 focus 属性来唤起键盘.
贴一份实现的代码.
