uni-app input组件disable后，无法调用tap等事件

开发环境	版本号	项目创建方式
Mac	12.6	HBuilderX

示例代码：

<input class="select-input" disabled maxlength="10" :placeholder="item.placeholder" :value="item.value" @tap="onDisplay" />

操作步骤：

根据代码示例即可复现

预期结果：

在disable状态下，可以触发绑定事件

实际结果：

无法触发绑定的事件

bug描述：

以H5运行在Chrome中调试，input组件disable后，无法调用tap等事件。

yibo5220 1楼•12 天前

最新版的Chrome都是这样的其他框架也都是一样的跟uniapp没关系解决方案参考这个问答：https://ask.dcloud.net.cn/question/176806

songsunli 2楼•12 天前

在 uni-app 中，当 input 组件被设置为 disabled 时，默认情况下，所有的事件（如 tap、click 等）都会被禁用。这是因为 disabled 属性不仅禁用了输入框的交互，还禁用了所有相关的事件。

如果你希望在 input 组件被禁用时仍然能够触发某些事件，可以考虑以下几种解决方案：

1. 使用 `readonly` 替代 `disabled`

readonly 属性会禁用输入框的编辑功能，但不会禁用事件。你可以将 disabled 替换为 readonly，这样用户仍然可以点击输入框并触发事件。

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

2. 使用 `view` 或其他容器包裹 `input`

你可以将 input 组件包裹在一个 view 或其他容器中，并在容器上绑定事件。这样即使 input 被禁用，容器上的事件仍然可以触发。

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

3. 使用 CSS 模拟禁用状态

你可以通过 CSS 来模拟禁用状态，而不是直接使用 disabled 属性。这样你可以完全控制输入框的样式和事件。

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

.disabled-input {
  background-color: #f5f5f5;
  color: #999;
  pointer-events: none; /* 禁用点击事件 */
}

4. 动态控制事件

你可以在事件处理函数中动态判断 input 是否被禁用，然后决定是否执行相应的逻辑。

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

export default {
  data() {
    return {
      isDisabled: true
    };
  },
  methods: {
    handleTap() {
      if (!this.isDisabled) {
        // 执行逻辑
      }
    }
  }
};

5. 使用 `cover-view` 或 `cover-image`

在某些情况下，你可以使用 cover-view 或 cover-image 来覆盖 input 组件，并在这些覆盖组件上绑定事件。

<cover-view [@tap](/user/tap)="handleTap">
  <input type="text" disabled />
</cover-view>