uni-app input设置disabled为true在部分新系统（小米澎湃、OPPO ColorOS）不能触发click事件

开发环境	版本号	项目创建方式
Windows	Windows 10	HBuilderX
	专业版 22H2

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

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

input设置disabled为true在部分新系统（小米澎湃、OPPO ColorOS）不能触发click事件。
根本原因：
- 由于升级系统导致手机的Chrome内核版本也跟着升级到116及以上版本，导致设置disabled的input无法触发并冒泡click事件。
- 参考链接：Chromium Bug Tracker

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

caililin 2楼•4 天前

NB！

caililin 3楼•4 天前

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

ionicwang 4楼•4 天前

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

ionicwang 5楼•4 天前

在 uni-app 中，如果你发现 input 元素设置了 disabled 为 true 后，在某些新系统（如小米澎湃、OPPO ColorOS）上无法触发 click 事件，这可能是由于这些系统对 disabled 元素的处理方式不同。

使用 readonly 替代 disabled

如果 input 不需要用户输入，但需要点击事件，可以使用 readonly 属性替代 disabled。readonly 属性会阻止用户输入，但不会阻止点击事件。
```
<input type="text" readonly [@click](/user/click)="handleClick" />
```
使用 div 或其他元素包裹 input

如果必须使用 disabled，可以将 input 包裹在一个 div 或其他元素中，并在包裹元素上监听 click 事件。
```
<div [@click](/user/click)="handleClick">
  <input type="text" disabled />
</div>
```

动态设置 disabled 状态

如果你需要在某些条件下禁用 input，但同时保留点击事件，可以动态设置 disabled 状态，并在 click 事件中根据条件进行处理。

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

methods: {
  handleClick() {
    if (!this.isDisabled) {
      // 处理点击事件
    }
  }
}

使用 CSS 模拟 disabled 状态

你也可以使用 CSS 来模拟 disabled 状态，这样 input 仍然可以触发点击事件。

<input type="text" :class="{ 'disabled-style': isDisabled }" [@click](/user/click)="handleClick" />

.disabled-style {
  opacity: 0.5;
  pointer-events: none;
}

methods: {
  handleClick() {
    if (!this.isDisabled) {
      // 处理点击事件
    }
  }
}