uni-app input组件的@click事件在vivo IQOO 11环境不触发

uni-app input组件的@click事件在vivo IQOO 11环境不触发

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 Windows 10 专业版 22H2
HBuilderX类型 正式
HBuilderX版本 3.96
手机系统 Android
手机版本号 Android 13
手机厂商 vivo
手机机型 IQOO 11
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<input :name='`${el.id}_start`' :class="['uni_input_font', 'text-single-select', {'active-select': !!el.value}]" disabled :value="el.value" type="text" [@click](/user/click)="el.show = !el.show" :placeholder="el.placeholder"/>

操作步骤：

<input :name='`${el.id}_start`' :class="['uni_input_font', 'text-single-select', {'active-select': !!el.value}]" disabled :value="el.value" type="text" [@click](/user/click)="el.show = !el.show" :placeholder="el.placeholder"/>

预期结果：

  • input 组件的@click="el.show = !el.show"事件无反应

实际结果：

  • input 组件的@click="el.show = !el.show"事件无反应

bug描述：

<input :name='`${el.id}_start`' :class="['uni_input_font', 'text-single-select', {'active-select': !!el.value}]" disabled :value="el.value" type="text" [@click](/user/click)="el.show = !el.show" :placeholder="el.placeholder"/>

在vivo IQOO 11 环境下APP事件@click=“el.show = !el.show” 不生效，导致用户无法选举数据


更多关于uni-app input组件的@click事件在vivo IQOO 11环境不触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

也遇到这个问题。
input 设置 disabled=“true” 后，在vivo IQOO 11上tap 事件失效。
用 view + input type=‘hidden’ hidden=‘true’ 的方式变通完成。

更多关于uni-app input组件的@click事件在vivo IQOO 11环境不触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大佬，请问可以提供一下具体参考代码吗？

找到具体原因了，Chrome内核版本116及以上的都有这个问题。 https://bugs.chromium.org/p/chromium/issues/detail?id=1477379&q=disabled input click&can=2

// 兼容Chrome内核116及以上版本中配置disabled的input组件无法触发并冒泡click事件 .uni-input-input:disabled { pointer-events: none; }

感谢反馈，我验证下，如果是这样，影响的地方挺多的。

回复 DCloud_UNI_OttoJi: 你好，最新版hx4.45还是会这样，

请问，你的问题解决了吗？

在 uni-app 中，input 组件的 @click 事件在某些特定环境下（如 vivo iQOO 11）可能无法正常触发，这可能是由于以下几个原因造成的：

1. input 组件的 @click 事件不适用

  • input 组件的 @click 事件并不是标准的 HTML 事件，因此在不同平台或设备上可能会有不同的行为。
  • 如果 input 组件已经获得焦点，点击事件可能会被忽略，因为焦点已经在该组件上。

2. vivo iQOO 11 的特定问题

  • 某些设备或系统版本可能存在兼容性问题，导致事件无法正常触发。
  • 可能是 vivo iQOO 11 的浏览器内核或系统对事件的处理方式与其他设备不同。

3. 解决方案

  • 使用 @focus 事件：如果需要在 input 组件获得焦点时执行某些操作，可以使用 @focus 事件代替 @click。

    <input @focus="handleFocus" />

    在 methods 中定义 handleFocus 方法：

    methods: {
  handleFocus() {
    console.log('Input focused');
  }
}

  • 使用 @tap 事件：在 uni-app 中，@tap 事件是更通用的点击事件，通常在所有设备上都能正常工作。

    <input @tap="handleTap" />

    在 methods 中定义 handleTap 方法：

    methods: {
  handleTap() {
    console.log('Input tapped');
  }
}

  • 使用 @input 事件：如果需要在用户输入时触发事件，可以使用 @input 事件。

    <input @input="handleInput" />

    在 methods 中定义 handleInput 方法：

    methods: {
  handleInput(event) {
    console.log('Input value:', event.detail.value);
  }
}
回到顶部