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

【背景】最近做了几个需求，涉及在小程序中蒙层或者其他固定布局中使用输入框（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'}"，完成~