uniapp使用 input弹出键盘问题

前言:在h5开发没问题,运行到真机就出现点击触发键盘,遮挡datetime-picker弹窗
两种解决办法:
1、按官方文档说的使用:uni.hideKeyboard(),但是如果是弹窗中存在滚动效果就无效
2、根据使用的组件去做对应的处理:
2.1、使用uniapp原生input,重点是加 inputmode=“none” 属性
<input v-model="tableInfo.formState.startDate" inputmode="none" placeholder="开始日期" @click="openDate('startDate')" />
2.2、使用uview-plus框架的up-input组件

重点是加上只读属性 readonly ,然后使用一个新的view去覆盖input的位置,用于触发点击事件

<view style="position: relative">
   <up-input
      v-model="formState.auditInfo.payTypeName"
      placeholder="请选择付款方式"
      :suffixIcon="showSelect ? 'arrow-up' : 'arrow-down'"
      suffixIconStyle="color: #909399"
      readonly
    />
    <view style="position: absolute; top: 0; bottom: 0; left: 0; right: 0" @click="showSelect = true" />
</view>

以上两种方法都可以解决键盘弹出问题,自己根据实际情况酌情使用!

上一篇:计网总结☞应用层


下一篇:借助ChatGPT快速仿写一篇优质论文,无痛仿写、完美创作