uni-app 安卓14 input设置为disabled后 @tap方法失效

uni-app 安卓14 input设置为disabled后 @tap方法失效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

<input class="input-text" v-model="visitType" placeholder="请选择" disabled  [@tap](/user/tap)="show8 = true" />

操作步骤：

<input class="input-text" v-model="visitType" placeholder="请选择" disabled  [@tap](/user/tap)="show8 = true" />

预期结果：

<input class="input-text" v-model="visitType" placeholder="请选择" disabled  [@tap](/user/tap)="show8 = true" />

实际结果：

<input class="input-text" v-model="visitType" placeholder="请选择" disabled  [@tap](/user/tap)="show8 = true" />

bug描述：

<input class="input-text" v-model="visitType" placeholder="请选择" disabled  [@tap](/user/tap)="show8 = true" />  
系统为安卓14后 input设置为disabled   点击的[@tap](/user/tap)方法失效 ,   之前版本的安卓可以点击

更多关于uni-app 安卓14 input设置为disabled后 @tap方法失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

给input中加一个css属性pointer-events: none 试试 我h5中遇到的这个问题都是这样解决的 或者降低input层级 给父级增加tap事件 <view @tap=“tapInput”>
<input style="position: relative;z-index: -1;"disabled type=“text” placeholder=“请选择”>
</view>

更多关于uni-app 安卓14 input设置为disabled后 @tap方法失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，当你在安卓14上将 input 元素设置为 disabled 后，[@tap](/user/tap) 事件失效的问题可能与安卓系统的事件处理机制有关。disabled 属性会禁用元素的交互，包括点击事件。因此，[@tap](/user/tap) 事件不会被触发。

解决方案

  1. 使用 readonly 属性： 如果你希望用户不能编辑 input 内容，但仍然希望触发点击事件，可以使用 readonly 属性代替 disabled。readonly 属性允许用户聚焦和点击 input，但不能编辑其内容。

    <input type="text" readonly [@tap](/user/tap)="handleTap" />

  2. 使用 pointer-events: none： 如果你仍然需要使用 disabled 属性，但希望保留点击事件，可以通过 CSS 的 pointer-events: none 来禁用元素的点击事件，然后在父元素上监听点击事件。

    <div [@tap](/user/tap)="handleTap">
  <input type="text" disabled style="pointer-events: none;" />
</div>

  3. 使用条件判断： 如果你希望在 input 被禁用时仍然能够触发某些逻辑，可以在 [@tap](/user/tap) 方法中添加条件判断。

    <input type="text" :disabled="isDisabled" [@tap](/user/tap)="handleTap" />

    methods: {
  handleTap() {
    if (!this.isDisabled) {
      // 你的逻辑
    } else {
      // 当禁用时的逻辑
    }
  }
}

  4. 使用自定义组件： 你可以创建一个自定义的 input 组件，封装 disabled 和 [@tap](/user/tap) 的逻辑，以便更好地控制事件处理。

    <template>
  <div [@tap](/user/tap)="handleTap">
    <input type="text" :disabled="isDisabled" />
  </div>
</template>

<script>
export default {
  props: {
    isDisabled: Boolean
  },
  methods: {
    handleTap() {
      if (!this.isDisabled) {
        // 你的逻辑
      } else {
        // 当禁用时的逻辑
      }
    }
  }
}
</script>
回到顶部