form表单元素设置disabled属性后支持点击click事件

已于 2024-03-30 11:12:27 修改
阅读量877 收藏
点赞数 17
分类专栏： vue学习 文章标签： vue.js javascript 前端
于 2024-03-30 10:42:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010609022/article/details/137167643
版权

form表单设置disable属性后，还想要点击，比如下面的代码，设置了disable，但是还想响应点击事件

<el-input :title="form.businessLicenseFileId ? $t('spList.showJs') : ''"
    v-model="form.businessLicenseFileName"
	:placeholder="$t('spList.businessLicenseFilePlace')" size="mini"
    @click="imagePreview('businessLicense')" 
    disabled>
</el-input>

那么需要在el-input元素外面包一层，可以是div，可以是label等其他元素，并把disable元素设置style="pointer-events:none"，这个样式是为了让元素忽略鼠标事件，让点击穿透到下一层元素，即为外层的label上的点击事件。

<label @click="imagePreview('businessLicense')">
    <el-input :title="form.businessLicenseFileId ? $t('spList.showJs') : ''"
        v-model="form.businessLicenseFileName"
        :placeholder="$t('spList.businessLicenseFilePlace')" 
        size="mini"
        disabled
        style="pointer-events:none">
    </el-input>
</label>

吾吾伊伊，野鸭惊啼
关注
  • 17
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular的事件和表单详解
08-31
例如，`click`事件是最常见的用户交互事件，它在用户点击元素时触发。除此之外，还有如`mouseover`和`mousemove`等事件，它们在鼠标进入或移动到元素上时触发。在表单中，我们经常会遇到像`selected`、`change`和`...
AngularJS使用指令增强标准表单元素功能
11-23
5. **表单指令属性**：除了`ng-model`，还有其他一些表单相关的指令，如`ng-change`会在模型值改变时触发回调，`ng-required`指定字段是否必须填写，`ng-disabled`控制元素的禁用状态等。这些指令帮助我们实现更复杂...
el-form使用了disabled但是想操作某个点击
m0_66300374的博客
04-08 794
作为前端一般操作都是新增，编辑，查看数据，新增和编辑是差不多的操作，只是编辑需要回显数据，查看的时候大部分的数据不可点击，所以就出现了有部分数据查看不完全的情况。主要是加了个<el-form></el-form>这样就不会被外面那层的全局禁用点击影响到，如果你想点击输入框跳转。中间的数据不能全部查看到，但是需求是点击右边按钮允许查看的。直接包裹输入框，然后写点击跳转的方法。
使用checkBox组件时，动态设置disabled，仍能触发click事件的原因及解决办法
小蓝人的博客
08-03 2249
在使用vant的Checkbox组件时，为了实现复选框组选择一个，禁用掉另一个，同时添加点击事件的功能时。遇到明明disabled=true，但仍能触发点击事件的情况。为此，分析下触发点击事件的原因及解决方法。
原创：关于点击按钮el-form内的某块内容禁用
qq_51292891的博客
05-24 431
原创
input输入框设置了disabled后想触发点击事件
qq_47163013的博客
01-15 940
input输入框设置了disabled禁止输入，然后想通过外层点击事件触发其它内容的弹出，安卓手机在公众号中会不生效，ios和浏览器环境下没有问题。1、把之前的disabled属性更换成了readonly。2、给input增加点击事件清除的样式如下。
input元素禁用了之后，点击事件是不会触发，禁用状态下也能触发点击事件或其他事件的办法
菜鸡的博客
09-14 3464
你可以使用CSS来模拟禁用状态的外观，而不实际禁用输入元素。这样，元素看起来像是禁用的，但仍然可以触发事件。你可以在禁用的输入元素上添加一个透明的覆盖层，以阻止用户点击它，但允许点击覆盖层上的内容。属性）时，该元素不会触发任何点击事件或其他交互事件。这是HTML规范的一部分，用于表示该输入元素处于不可交互状态，用户不能与其进行交互或触发任何事件。请根据你的需求选择适当的方法，以实现在禁用状态下触发事件。前两种方法需要一些自定义的样式和事件处理，但可以满足特定的交互需求。在HTML中，当一个。
input disabled 和 点击事件问题
热门推荐
fk129
08-24 1万+
input 设置了disabled属性，无法添加点击事件 &lt;input type="number" name="apply_num" value="" disabled="" onclick="takeNum(this)"&gt; 这样点击函数takeNum是无法触发的，因disabled的属性禁用了input的点击 ...
uview1.0部分机型u-input组件禁用后无法触发click事件
给我一根筷子，我能撬动整个地球
10-22 1891
最近，线上的一个 App 收到用户反馈，输入框禁用状态下点击无法拉起模态框。找了一下身边可用机型进行了测试，在。中复现了这个问题，只有输入框右侧的图标可以触发点击事件，点击输入框无法触发点击事件。注：input 组件是 uniapp 提供的内置表单组件，是没有点击事件的。也就是说在部分 Android 机型上，禁用状态下的。事件没有向上冒泡，从而导致外层的盒子无法触发事件。组件外套了盒子，外面的盒子确实绑定了。事件，我们处理的实际上是。组件的点击事件而不是。
实用jquery操作表单元素的简单代码
11-25
获取和设置下拉菜单的值； 清空下拉菜单； 给下列菜单添加元素； 取单选框值； 单选或复选按钮的选择； 取复选框值； 判断单选或复选框是否被选中； 元素可用不可用； 判断元素可用不可用。 实用jquery操作表单元素...
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
11-27
在示例代码中，我们看到`<button>`元素的`ng-disabled`属性被设置为`!shyj`。这里的`!`是逻辑非运算符，表示如果`shyj`的值为空或 falsy（比如 null、undefined、空字符串等），按钮就会被禁用；反之，如果`shyj`有...
vue组件中点击按钮后修改输入框的状态实例代码
08-30
在本例中，创建了一个名为`isDisabled`的data属性，并初始设置为`true`，这样`<el-input>`会被禁用。正确的实现方式是使用`v-bind:disable`或简写`:disable`来绑定`isDisabled`属性，例如：`...
前端 解决input框被禁用后无法添加点击事件的bug 简单易懂，快来围观
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
04-12 3217
解决input框被禁用后无法添加点击事件的bug 简单易懂，快来围观
uView，uinput设置为disabled禁用后点击事件click失效的问题及解决
Yami__yan的博客
04-02 542
红米机型uinput点击事件无效了，更改源码后问题解决。
vue中 input disable后无法触发点击事件
gaxing4615的博客
02-28 1221
大家都知道 input[type=text|button|radio|checkbox] 支持 disabled 属性，可以实现事件的完全禁用。如果其他标签需要类似的禁用效果，可以试试 pointer-events: none。问题：input标签为disabled后，点击事项无效；当点击文字**“请选择”**时无法触发点击事件，其父标签的其余位置均可触发。解决：只需要在input标签中添加 style=“pointer-events:none” 即可。作用是让元素实体 “虚化”，去掉鼠标事件。
解决uview2中u--input输入框禁用状态下click事件不生效
最新发布
逆水行舟 不进则退
06-12 449
解决uview2中u--input输入框禁用状态下click事件不生效
uni-app——uniapp uView u-button 设置了 disabled 为 true 还能触发 click 事件
qq_43201350的博客
05-16 373
uni-app——uniapp uView u-button 设置了 disabled 为 true 还能触发 click 事件
uniapp微信小程序 实现评论键盘弹出的时候 有两个输入框,第一个输入框被禁用并绑定了点击事件,点击后想要触发第二个输入框获取焦点并弹出键盘。但是在 iOS 真机上点击后键盘会短暂失去焦点
T3165919332的博客
08-15 1398
由于我这里出现的问题 是第二个input框聚焦了 然后又马上失焦 然后我考虑可能是第三条的原因 因为我点击第一个input框后就切换了第二个input框的聚焦状态 这里可能切换太快 然后就给改变状态的地方加上了一个定时器 问题就解决啦。：我现在有一个需求就是 要实现输入评论 有两个输入框,第一个输入框被禁用并绑定了点击事件,点击后想要触发第二个输入框获取焦点并弹出键盘。3. iOS 的键盘有一个晃动检测的机制,如果短时间内聚焦状态频繁切换,会认为是程序错误导致的无意聚焦,会自动还原。
有些标签＜button＞＜/button＞有2部分组成，＜input＞只有一部分组成 标题分类：单标签和双标签
qq_44791674的博客
08-23 875
html标签 易错点分析 有个地方用到了标签，结果出现了一个很奇怪的问题，form的内容被提交了两次，只针对IE浏览器，chrome不会。由于使用了boss的一个框架，一度使我怀疑是不是他那框架存在兼容性问题，不过找了好久最终还是找到了答案。原因就在于button标签的使用。 “在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处. 控件 与 相比，提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可
elemtnui 表单禁用状态用计算属性还是事件比较好
07-14
在 Element UI 中，禁用表单的状态可以使用计算属性或事件来处理，具体取决于你的需求和实际情况。 如果禁用表单的状态是基于一些简单的逻辑判断（例如，根据某个条件来判断是否禁用），那么使用计算属性是比较合适的。计算属性可以根据数据的变化自动更新，当条件满足时返回 `true`，否则返回 `false`。这样，在模板中可以直接使用计算属性来设置表单的禁用状态。 例如，在模板中使用计算属性来禁用表单： ```html <template> <div> <el-form :disabled="isFormDisabled"> <!-- 表单内容 --> </el-form> </div> </template> ``` 然后，在 Vue 实例中定义计算属性 `isFormDisabled`： ```javascript <script> export default { computed: { isFormDisabled() { // 根据条件来判断是否禁用表单 return this.someCondition; } }, }; </script> ``` 如果禁用表单的状态是需要在特定的事件或逻辑中进行动态处理（例如，点击按钮后禁用表单），那么可以使用事件来处理。在事件中根据需要的逻辑来修改表单的禁用状态。 例如，在点击按钮后禁用表单： ```html <template> <div> <el-form :disabled="disabledForm"> <!-- 表单内容 --> </el-form> <el-button @click="disableForm">禁用表单</el-button> </div> </template> ``` 然后，在 Vue 实例中定义对应的方法来处理禁用表单的逻辑： ```javascript <script> export default { data() { return { disabledForm: false }; }, methods: { disableForm() { this.disabledForm = true; } }, }; </script> ``` 通过点击按钮触发 `disableForm` 方法，将 `disabledForm` 属性设置为 `true`，从而禁用表单。 综上所述，如果禁用表单的状态是基于简单的逻辑判断，使用计算属性比较合适；如果禁用表单的状态需要在特定的事件或逻辑中进行动态处理，使用事件来修改表单的禁用状态更适合。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值