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

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,代表作灵感实用工具小程序

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

要回复问题请先登录注册