uniapp软键盘第一次遮蔽input

uniApp中的软键盘遮挡input输入框的问题通常出现在用户聚焦到文本输入区域时，由于键盘弹出导致屏幕内容上移。解决这个问题的方法是利用Vue的一些生命周期钩子和CSS调整。

1. **使用`@focus`和`@blur`事件**：
当元素获取焦点时(`focus`)，你可以隐藏或调整软键盘，当失去焦点(`blur`)时恢复原状。例如：

   <template>
     <input @focus="showSoftKeyboard" @blur="hideSoftKeyboard" />
   </template>

   <script>
   export default {
     methods: {
       showSoftKeyboard() {
         uni.showKeyboard();
       },
       hideSoftKeyboard() {
         uni.hideKeyboard();
       }
     }
   }
   </script>

2. **CSS处理**：
可以使用一些CSS技巧，比如设置固定的输入区域高度，然后动态调整其`padding-bottom`以容纳键盘。在JavaScript里，当键盘显示时添加负值的`padding-bottom`，键盘关闭时还原。

.input-wrapper {
  padding-bottom: env(safe-area-inset-bottom); /* 添加安全区域高度 */
}

.input-wrapper.has-keyboard {
  padding-bottom: calc(100% + env(safe-area-inset-bottom)); /* 针对键盘显示时增加额外空间 */
}