uniapp - 移动端H5网页点击输入框弹出软键盘后，收起后页面无法复原，页面没能恢复原状+遮盖遮挡+布局出现上移或下移整体未复原到打开软键盘之前（解决弹出键盘导致页面布局错乱，安卓+苹果ios）

这个问题可以通过监听键盘弹出事件以及修改输入框的位置来解决。具体的做法如下： 1. 在uniapp中，可以使用`onKeyboardHeightChange`事件来监听键盘弹出事件，该事件会在键盘弹出或收起时触发。 2. 在事件处理函数中，可以获取到键盘高度，然后根据键盘高度来计算输入框需要向上移动的距离。 3. 修改输入框的位置，可以使用`uni.createSelectorQuery`来获取输入框的位置和大小，然后通过修改`input`元素的`top`样式来移动输入框。 下面是一个示例代码： ```javascript <template> <view> <web-view src="https://example.com"></web-view> <input type="text" ref="input" placeholder="请输入内容"></input> </view> </template> <script> export default { methods: { onKeyboardHeightChange({ height }) { const query = uni.createSelectorQuery().in(this); query.select('input').boundingClientRect((res) => { const top = res.top - height; uni.$emit('input-top-change', top); }).exec(); } }, mounted() { uni.onKeyboardHeightChange(this.onKeyboardHeightChange); uni.$on('input-top-change', (top) => { this.$refs.input.$el.style.top = `${top}px`; }); }, destroyed() { uni.offKeyboardHeightChange(this.onKeyboardHeightChange); uni.$off('input-top-change'); } } </script> ``` 在上面的代码中，我们监听了`onKeyboardHeightChange`事件，并在事件处理函数中使用`uni.createSelectorQuery`来获取输入框的位置和大小。然后通过`uni.$emit`来触发一个自定义事件，将输入框需要移动的距离传递给父组件。父组件监听到该事件后，通过修改`input`元素的样式来移动输入框。 需要注意的是，在移动输入框时，需要将其父元素的`position`属性设置为`relative`或`absolute`，否则`top`样式无效。