input disabled 和 点击事件问题

最新推荐文章于 2024-08-01 17:45:28 发布
最新推荐文章于 2024-08-01 17:45:28 发布
阅读量1.6w 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36061522/article/details/82019985
版权

input 设置了disabled属性，无法添加点击事件

<input type="number" name="apply_num" value="" disabled="" onclick="takeNum(this)">

这样点击函数takeNum是无法触发的，因disabled的属性禁用了input的点击
这里写图片描述

fk129
关注
input设置disabled为true后，如何触发点击事件？
王铁柱666的博客
10-10 393
在HTML中，当一个元素的disabled属性设置为true时，该元素将不再可用，并且无法接收用户输入或触发事件，包括点击事件。这是为了防止用户与某些表单控件进行交互。如果你想要在用户点击一个看似被禁用的元素时触发某些操作，你需要使用其他方法，因为直接在被禁用的上设置点击事件监听器是无效的。
vue中 input disable后无法触发点击事件
gaxing4615的博客
02-28 1883
大家都知道 input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，可以试试 pointer-events: none。问题：input标签为disabled后，点击事项无效；当点击文字**“请选择”**时无法触发点击事件，其父标签的其余位置均可触发。解决：只需要在input标签中添加 style=“pointer-events:none” 即可。作用是让元素实体 “虚化”，去掉鼠标事件。
elementui的input的disabled属性导致点击事件失效，可采用readonly属性替换，修改其样式如下
m0_46120422的博客
01-26 1630
关键点在于readonly-input类名映射变量 --el-input-bg-color。
当 el-input 组件处于禁用状态时，其 click 事件依然会被触发
to_the_Future的博客
04-07 3373
当 el-input 组件处于禁用状态时，其 click 事件依然会被触发
input元素禁用了之后，点击事件是不会触发，禁用状态下也能触发点击事件或其他事件的办法
菜鸡的博客
09-14 3773
你可以使用CSS来模拟禁用状态的外观，而不实际禁用输入元素。这样，元素看起来像是禁用的，但仍然可以触发事件。你可以在禁用的输入元素上添加一个透明的覆盖层，以阻止用户点击它，但允许点击覆盖层上的内容。属性）时，该元素不会触发任何点击事件或其他交互事件。这是HTML规范的一部分，用于表示该输入元素处于不可交互状态，用户不能与其进行交互或触发任何事件。请根据你的需求选择适当的方法，以实现在禁用状态下触发事件。前两种方法需要一些自定义的样式和事件处理，但可以满足特定的交互需求。在HTML中，当一个。
input输入框设置了disabled后想触发点击事件
qq_47163013的博客
01-15 1314
input输入框设置了disabled禁止输入，然后想通过外层点击事件触发其它内容的弹出，安卓手机在公众号中会不生效，ios和浏览器环境下没有问题。1、把之前的disabled属性更换成了readonly。2、给input增加点击事件清除的样式如下。
通过disabled和readonly将input设置为只读效果
12-14
在HTML表单设计中，有时候我们需要用户只能查看输入框（input）中的内容而不能修改，这时我们可以使用`disabled`和`readonly`属性来实现只读效果。这两种属性虽然都能达到表面的只读目的，但它们在功能上存在显著...
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
10-15
在对应的JS文件中，我们需要定义数据和处理点击事件： ```javascript Page({ data: { isDisabled: true, // 初始状态下，姓名Input禁用 text: "编辑" // 按钮初始文字 }, changeInfo(e) { if (!this.data.is...
Vue动态控制input的disabled属性的方法
08-27
当我们点击修改操作时，dataForm.id 的值将被设置为当前要修改的记录的 ID，这样 input 框的 disabled 属性将被添加，input 框将变为只读模式。 需要注意的是，虽然我们使用了 disabled 属性来禁用 input 框，但是...
给禁用的 el-input 添加点击/双击事件
最新发布
朝阳39的博客
08-01 544
被禁用的 html 标签，无法响应事件。
在input加了disabled属性后，如何触发点击事件?
weixin_47020721的博客
03-07 6622
点击子标签，会一层一层往上传，并触发父标签的绑定事件。
disabled与tap(input的disabled='disabled'时tap事件任可触发)
02-20 536
一个input按钮加上disabled="disabled"后，它身上zepto的tap事件任然会触发，但是click事件不会触发 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" ...
input控件禁用事件
Xiark2015的博客
03-20 1759
<input id="sure-pass" style="color: red" onpaste="return false;" ondragenter = "return false;" ondrop="return false" ondragstart="return false" autocomplete="off"> ondragstart="return false" ...
input上添加disabled=“true“，点击事件失效处理办法
m0_67624022的博客
05-08 1168
给input标签添加样式style="pointer-events: none;
html input不响应事件,原来被disabled的input元素是不响应鼠标事件的_html/css_WEB-ITnose...
weixin_33214011的博客
06-09 551
前几天做客服的时候遇到个客户来说我们的页面出错了, 两边鸡同鸭讲了半天发现都没法理解对方, 让客户截图后发现果然跟我这边不一样, 远程过去一看, 对面用的是 Win10 + Edge, 在我们本该出现 tipsy 的地方鼠标移上去没任何反应, 客户看不到该有的提示, 也难怪要跑过来找客服一开始以为是 Edge 和 IE11 又出现什么奇葩的 jQuery 事件绑定错误, 需要在 knockout ...
uni-app 问题总结
qq_36158551的博客
03-12 2461
在开发中，我们经常会遇到需要禁用input框的情况，但是禁用后无法添加点击事件的问题。
前端 解决input框被禁用后无法添加点击事件的bug 简单易懂，快来围观
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
04-12 3410
解决input框被禁用后无法添加点击事件的bug 简单易懂，快来围观
记录一下uni-app输入框input的@input事件失效问题
海贼王某人的博客
07-22 5273
记录一下uni-app输入框input的@input事件失效问题
input disabled
07-27
disabled属性用于禁用input元素，使其既不可用也不可点击。可以通过设置disabled属性来禁用input元素，直到满足某些其他条件为止。然后，可以使用JavaScript来删除disabled值，将input元素切换为可用状态。\[1\] 与disabled属性相比，readonly属性用于将input文本框设置为只读，即用户可以看到文本框中的内容，但无法修改。在实际开发中，我们可以使用disabled属性或readonly属性来实现将input文本框设置为不可修改的效果。\[2\] 区别在于，disabled属性会使文本框变灰，并且在表单传输数据时，对应的value值不会被传输到后台，因此后端无法获取到文本框中的内容。而readonly属性只是将文本框设置为只读，用户无法修改内容，但在表单传输数据时，对应的value值会被传输到后台，后端可以获取到文本框中的内容。\[3\] #### 引用[.reference_title] - *1* [HTML input标签中disabled属性](https://blog.csdn.net/cheng1a/article/details/122704392)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [input标签设置文本不可修改的两种状态（disable、readonly）区别](https://blog.csdn.net/good_good_xiu/article/details/115395108)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值