5***@qq.com
5***@qq.com
  • 发布:2023-12-28 11:14
  • 更新:2024-04-12 17:01
  • 阅读:241

【报Bug】input设置disabled为true在部分新系统(小米澎湃、OPPO ColorOS)不能触发click事件

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版 22H2

HBuilderX类型: 正式

HBuilderX版本号: 3.98

手机系统: Android

手机系统版本号: Android 14

手机厂商: OPPO

手机机型: 一加 Ace

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<input type="text" placeholder="请选择" value="form.type" disabled="true" @click="selectType()"
/>

操作步骤:
<input type="text" placeholder="请选择" value="form.type" disabled="true" @click="selectType()"
/>

预期结果:

点击input控件,触发selectType方法

实际结果:

点击input控件,没有触发selectType方法,无任何信息打印

bug描述:

input设置disabled为true在部分新系统(小米澎湃、OPPO ColorOS)不能触发click事件。

根本原因:

由于升级系统导致手机的Chrome内核版本也跟着升级到116及以上版本,导致设置disabled的input无法触发并冒泡click事件。
https://bugs.chromium.org/p/chromium/issues/detail?id=1477379&q=disabled%20input%20click&can=2

2023-12-28 11:14 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

之前遇到过类似的 是在google浏览器中 input设置disabled后无法点击
我是用这个属性解决的 你可以参考一下 试试手机端能不嗯生效

<input style="pointer-events: none"></input>
5***@qq.com

5***@qq.com (作者)

全局CSS:

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

JXWang

JXWang

浏览器原生 input 元素 disabled 后也不支持触发 click 事件,可使用 touch 相关事件替代,touch 相关事件可以触发

要回复问题请先登录注册