9***@qq.com
9***@qq.com
  • 发布:2023-08-30 09:57
  • 更新:2024-03-06 14:22
  • 阅读:1609

input 加disabled 属性点击事件无效

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows10

HBuilderX类型: 正式

HBuilderX版本号: 3.8.12

浏览器平台: Chrome

浏览器版本: 116.0.5845.111

项目创建方式: HBuilderX

示例代码:
复制代码<template>  
    <view class="content">  
        <input type="text" disabled placeholder="规格、品名、品牌、产地、城市" @click="toSearchPage" />  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            toSearchPage() {  
                console.log(1111111);  
            },  
        }  
    }  
</script>

操作步骤:

<template>
<view class="content">
<input type="text" disabled placeholder="规格、品名、品牌、产地、城市" @click="toSearchPage" />
</view>
</template>

<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {

复制代码    },  
    methods: {  
        toSearchPage() {  
            console.log(1111111);  
        },  
    }  
}  

</script>

复制代码

预期结果:

<template>
<view class="content">
<input type="text" disabled placeholder="规格、品名、品牌、产地、城市" @click="toSearchPage" />
</view>
</template>

<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {

复制代码    },  
    methods: {  
        toSearchPage() {  
            console.log(1111111);  
        },  
    }  
}  

</script>

复制代码

实际结果:

<template>
<view class="content">
<input type="text" disabled placeholder="规格、品名、品牌、产地、城市" @click="toSearchPage" />
</view>
</template>

<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {

复制代码    },  
    methods: {  
        toSearchPage() {  
            console.log(1111111);  
        },  
    }  
}  

</script>

复制代码

bug描述:

给input 输入框加上disabled 禁用属性 PC浏览器(谷歌,火狐,Edge)主流浏览器点击事件均无法触发

2023-08-30 09:57 负责人:无 分享
已邀请:
两只羊

两只羊

你都禁用了,想要有效的话可以套个壳

  • gul

    没用,我之前代码跑浏览器上都能正常点击,现在突然就不行了。。。

    2023-09-05 14:31

梧桐树

梧桐树

楼主怎么解决了吗,我在外面套个壳也不用

梧桐树

梧桐树

H5和app上正常,PC不能用

1***@qq.com

1***@qq.com

@DCloud-HBuilderX团队 @DCloud_UNI_YRJ @DCloud_UNI_FXY @DCloud_UNI_LXH input组件disabled后点击事件无效

8***@qq.com

8***@qq.com

增加样式 pointer-events: none;

  • 5***@qq.com

    网上回答最多的就是这个方法。我试了,无效。

    2024-05-27 15:36

uniapp程序开发

uniapp程序开发 - uniapp&php程序开发,有开发需求,+我:angelcry00

HTML标签本身就是这样的,用v-if判断,用view模拟一个input

1***@qq.com

1***@qq.com

input 添加样式 pointer-events: none;外面套一个view点击事件触发

Diligent_UI

Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序

禁用了确实不能点击,你可以写一个一模一样的框放在那里,用于点击;设置只读也行

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容