input标签type=button时，如何禁用和开启按钮

最新推荐文章于 2022-04-30 18:06:06 发布
最新推荐文章于 2022-04-30 18:06:06 发布
阅读量1.3k 收藏
点赞数 2
文章标签： 开发工具 javascript ViewUI
本文介绍如何使用jQuery控制按钮的状态，包括禁用与启用按钮的功能。通过简单的代码示例，展示了如何防止按钮被重复点击，以及如何根据特定条件来启用或禁用按钮。

本文为博主原创，未经允许不得转载：

<input id="exportCameraButton" type="button" class="btn btn-success" value="导出" style="background: rgb(0, 184, 184);" onclick="exportCamera()">

点击按钮，触发onclick事件，并作出相应的响应。

但很多时候，我们要对按钮进行控制，比如说该按钮只能请求一次，不能同时触发多次请求，或当满足某种条件时，可以进行点击触发，不满足时，就禁用。

jQuery中提供了对应的方法，对其进行控制：

禁用按钮的方法如下：

$("#exportCameraButton").attr("disabled","disabled");

取消禁止，开启按钮的方法如下：

$("#exportCameraButton").removeAttr("disabled");;

 

＜button＞ 与 ＜input type=“button“ /＞
liuhao9999的博客
07-26 646
未指定该属性，则单击该按钮将提交其封闭的表单。如果要创建可点击按钮，建议使用该元素。这对于设置按钮样式非常有用。），因此它不能包含内容。充当提交按钮，我们必须将。with的类型更具语义。可以包含HTML。...
input 和 button 禁用
qq_42451776的博客
09-04 1091
<body> <input type="text" value="sdjaja"> <button class="btn1">的哈哈哈</button> <button class="btn2"> 禁用input切换 </button> </body> <script> window.onload = function () { let e
7--input 保存按钮 禁用可用
xu_ze_qin的博客
06-22 386
首先搭建页面： <view class="page"> <view class="top"> <!-- 路由组件传参 --> <text>班级名称</text> <button type="submit" bindtap="save" class="save" disabled='{{isDisabled}}'>保存</button> </view> <input c.
jquery 禁用和启用input按钮
php菜鸟博客
01-26 257
var obj = $(this); obj.attr({"disabled": "disabled"}); //禁用input按钮 obj.removeAttr('disabled'); //启用input按钮
button根据条件禁用或可用
Luckyoye的博客
04-30 4083
小王的前端升级之路button根据条件禁用或可用：总结 button根据条件禁用或可用： 需求：点击编辑，可操作“添加”，新增的字段可以修改杀出，已有的字段不能进行任何操作 思路： 1.table中的column用render渲染出修改和删除两个button，button根据条件禁用或可用 2.点击添加一行后弹出模态框，模态框（form表单）点击确定时拿到form表单的数据，在确定的回调中自定义一个字段，我定义的是isAbled，key和value都随便定义，主要目的就是用来区分是否为新增的list 3
input输入框只读和禁用状态
xiao白的博客
05-31 8015
1，设置input为只读状态，代码如下： <input readonly="readonly" /> 设置input为不用状态，代码如下： <input disabled="disabled" /> button按钮设置禁用 <button type="button" disabled="disabled">Click Me!</button&...
button和input type=button的区别及注意事项
09-28
在HTML中，`<button>`和`<input type="button">`都是用于创建按钮的元素，但它们之间存在一些关键的区别。理解这些差异对于编写兼容各种浏览器和提供良好用户体验的网页至关重要。 首先，`<button>`标签允许在按钮...
Quasar Input:type=number 去掉上下小箭头 实现加减按钮样式功能
12-28
input type=”number” 去掉上下小箭头 去掉上下小箭头，主要是css: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='number'] { -moz-...
JS中type="button"和type="submit"的区别
10-19
当用户点击这个类型的按钮时，表单会立刻被提交，并且表单中的所有具有`name`属性的输入元素（如`input`、`button`、`select`等）会被转化为键值对并发送到服务器。值得注意的是，`type="submit"`按钮本身并不会作为...
android input button 禁用,How to disable dot button in android Kotlin
weixin_28884811的博客
05-28 201
I am new to Android Studio - Kotlin, I am building an app with numbers and math operators with decimal point(.dot button)In my math calculator app, if press the dot button, the button should be disabl...
零基础Bootstrap入门教程(11)--按钮与按钮组
程序员大阳
02-21 2175
本文目录1. 概述2. 按钮的使用2.1 设置Bootstrap按钮2.2 调整按钮大小2.3 调整按钮颜色样式3. 按钮组的使用3.1 使用按钮组3.2 调整按钮组的大小3.3 调整按钮组方向4. 小结 1. 概述 按钮可以说是使用频率最高的交互组件之一了，Bootstrap框架对按钮也非常重视，提供了多种样式强化类。同时还提供了按钮组，可以组合使用按钮，更加方便。 2. 按钮的使用 2.1 设置Bootstrap按钮 在Bootstrap框架下，只需要为按钮添加.btn类，然后添加.btn-defaul
javascript禁用button：原生方式和jQuery方式
11-08 747
这个问题看似很简单，但是确实有时候也有必要拿出来给大家看。 &lt;input id="btnShow" type="button" value="点击" class="btn"&gt; 上面是一段按钮的html代码 1.原生的js方式：document.getElementByIdx_x_x("btnShow").disabled=true;//这样就把按钮禁用了，如果要重新开启
jquery disable按钮（启用、禁用按钮）
热门推荐
wangjun5159的专栏
08-14 8万+
启用按钮： $("#id").attr("disabled","disabled"); 禁用按钮： $("#id").$("#id").removeAttr("disabled");
禁用和启用input元素
qq_15325579的博客
03-08 6362
禁用 input 字段 有时你可能需要禁用表单的 submit 按钮或者某个 input 字段，直到用户执行了某些操作（例如，检查“已阅读条款”复选框）。可以添加 disabled 属性，直到你想启用它时： $('input[type="submit"]').prop('disabled', true); 你要做的就是执行 removeAttr 方法，并把要移除的属性作为参数传入：
jquery禁用、启用button以及button的样式操作
你好，我们在哪里见过啊！
06-06 7万+
我们在页面当中，经常需要跟button打交道，那么，就涉及到各种button的操作，在此写下来，供自己参考使用。一：禁止使用button1.直接写在&lt;button&gt;标签里面&lt;button id="btn" disabled="disabled"&gt;设置按钮不可以点击&lt;/button&gt;2.js禁用buttondocument.getElementById("btn"..
HTML中button和input button的区别
ethan444163330的专栏
05-06 5908
一句话概括主题：具有相同的作用但是在可操控性方面更加强大。 HTML 4.01规范的Forms部分指 名表单有以下几种控制类型：buttons, checkboxes, radio buttons, menus, text input, file select, hidden controls, object controls. 其中除了buttons/menus/object cont
Jquery禁用/启用按钮与文本框代码
u010523770的专栏
08-08 6776
Jquery禁用/启用按钮与文本框代码 www.111cn.net  在jquery中如果要禁止文框与按钮恢复效果我们需要动态设置disabled即可了，如果要设置为只读我们只要设置readonly即可。 disabled  代码如下 复制代码 禁用 id 为 btn 的按钮： $("#btn").attr({"disabl
js 禁用和解除禁用按钮_JavaScript如何来禁用按钮？
weixin_30990711的博客
01-27 2万+
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能。那么如何使用javascript来禁用按钮、让按钮不可点击？下面本篇文章就来给大家介绍一下。在JavaScript中，可以为button按钮添加上disabled属性来禁用按钮。disabled属性规定应该禁用input/button元素，只要在标签中添加属性disabled="true...
input type="button" 按钮提交事件
最新发布
08-26
<think>首先，用户的问题是：“我想为HTML中的按钮元素添加提交事件处理程序。请问如何在HTML中为input type button添加提交事件监听器？” 我需要根据系统级指令来回答： - 所有行内数学表达式必须使用 $...$ 格式，但这里没有数学内容，所以可能不需要。 - 独立公式用 $$...$$，但同样，没有数学内容。 - LaTeX 语法正确，但问题不涉及数学。 - 使用中文回答。 - 生成相关问题。 - 回答中引用的段落末尾自然地添加引用标识，例如 [^1]。 用户可见层指令： - 回答结构清晰，帮助用户逐步解决问题。 - 尽量保证回答真实可靠。 - 参考站内引用：用户提供了几个引用，我需要参考它们。 用户提供的引用： - [^1]: 关于 button 和 input type=button 在 IE 和 W3C 浏览器中的区别。IE 下两者行为相同，但 W3C 下 button 标签会提交表单，而 input type=button 不会。 - [^2]: 关于 layui 中 button 点击事件的处理，分两种：使用 lay-submit 和 lay-event 属性，或使用原始 js 和 jq 监听。 - [^3]: 同一个元素注册多个事件监听，都会被执行。 - [^4]: 使用 addActionListener() 方法为按钮添加单击事件监听器，需要继承 ActionListener 类并重写 actionPerformed() 方法（这似乎是 Java Swing 的内容，不是 HTML/JS）。 - [^5]: 在 JS 中使用 addEventListener 为动态创建的元素添加事件监听。 用户的问题是关于 HTML 中的按钮添加提交事件处理程序，具体是为 input type=button 添加提交事件监听器。这应该使用 JavaScript 来实现。 核心解决方案： - 在 HTML 中，input type=button 元素不会自动提交表单。需要添加事件监听器来触发提交。 - 可以使用 JavaScript 的 addEventListener 方法。 - 或者使用 HTML 的 onclick 属性，但推荐使用 JavaScript 分离逻辑。 参考用户提供的引用： - [^1] 强调在 W3C 浏览器中 input type=button 不会提交表单，所以需要手动添加事件。 - [^5] 提到使用 addEventListener 为动态创建的元素添加事件监听。 - [^4] 是关于 Java Swing 的，不相关，可以忽略。 - [^2] 是关于 layui 的，但用户没有指定使用 layui，所以可能不直接相关。 - [^3] 是关于多个事件监听的，但用户的问题不是关于多个事件。 所以，我需要基于 [^1] 和 [^5] 来构建回答。 回答结构： 1. **理解问题**：解释 input type=button 的行为。 2. **解决方案**：逐步说明如何添加事件监听器。 3. **代码示例**：提供 HTML 和 JavaScript 代码。 4. **注意事项**：提到浏览器兼容性或最佳实践。 5. **生成相关问题**：在末尾添加相关问题。 使用中文回答。 步骤： 1. **介绍**：简要解释 input type=button 在 HTML 中的行为。 - 引用 [^1]: 在 IE 中，input type=button 和 button 标签行为相同，但在 W3C 浏览器中，input type=button 不会提交表单。 2. **添加事件监听器**： - 使用 JavaScript 的 addEventListener 方法。 - 参考 [^5]: 使用 addEventListener 为元素添加事件监听。 - 示例代码：如何获取元素并添加点击事件监听器，在事件处理程序中提交表单。 3. **代码示例**： - HTML: `<input type="button" id="myButton" value="Submit">` - JavaScript: `document.getElementById('myButton').addEventListener('click', function() { document.getElementById('myForm').submit(); });` - 假设表单有 id。 4. **替代方法**： - 使用 onclick 属性直接在 HTML 中：`<input type="button" onclick="document.getElementById('myForm').submit()" value="Submit">` - 但推荐使用 addEventListener 以便分离逻辑。 5. **注意事项**： - 确保表单有 id 或能被正确引用。 - 浏览器兼容性：addEventListener 在现代浏览器中都支持，但旧版 IE 可能需要 attachEvent（但用户可能不需要考虑，除非指定）。 - 引用 [^1] 来强调为什么需要手动提交。 6. **生成相关问题**：在末尾添加 2-3 个相关问题。 引用标识：在相关段落末尾添加 [^1], [^5] 等。 最终回答结构： - 开头：直接回答问题。 - 步骤：清晰、逐步。 - 代码块：使用 Markdown 格式。 - 结尾：相关问题。</think>### 如何在 HTML 中为 input type="button" 添加提交事件监听器 在 HTML 中，`<input type="button">` 元素不会自动提交表单（在 W3C 浏览器如 Firefox 中，它不会触发表单提交，而 `<button>` 标签默认会提交表单[^1]）。因此，您需要手动添加事件监听器来触发提交操作。以下是逐步解决方案，使用 JavaScript 实现事件监听，确保代码清晰且兼容主流浏览器。 #### 步骤说明 1. **理解元素行为**： - `input type="button"` 是一个普通按钮，不会自动关联表单提交。 - 在 W3C 浏览器中，必须通过 JavaScript 添加事件处理程序来模拟提交行为[^1]。 - 推荐使用 `addEventListener` 方法，因为它支持动态元素和多个事件监听[^5]。 2. **添加事件监听器**： - 使用 JavaScript 的 `addEventListener` 为按钮绑定点击事件。 - 在事件处理函数中，调用表单的 `submit()` 方法。 - 示例代码： ```html <!-- HTML 部分 --> <form id="myForm"> <input type="text" name="username" placeholder="输入用户名"> <input type="button" id="submitButton" value="提交表单"> </form> <!-- JavaScript 部分 --> <script> // 获取按钮元素 const button = document.getElementById('submitButton'); // 添加点击事件监听器 button.addEventListener('click', function() { // 获取表单并提交 const form = document.getElementById('myForm'); form.submit(); }); </script> ``` - **说明**： - `addEventListener` 是标准方法，支持现代浏览器（Chrome、Firefox、Edge 等）。 - 如果元素是动态生成的，同样适用此方法[^5]。 3. **替代方法（不推荐）**： - 使用 `onclick` 属性直接内联事件（代码耦合度高，不易维护）： ```html <input type="button" value="提交表单" onclick="document.getElementById('myForm').submit()"> ``` - 注意：内联事件在复杂场景中可能引发问题，优先选择 `addEventListener`。 4. **注意事项**： - **表单引用**：确保表单有唯一 ID（如 `id="myForm"`），以便正确获取。 - **浏览器兼容性**： - `addEventListener` 在 IE9+ 中支持，旧版 IE 可用 `attachEvent`（需兼容处理）。 - 测试时注意不同浏览器的表单提交行为差异[^1]。 - **多个事件监听**：同一个按钮可添加多个事件监听器，它们会按注册顺序执行[^3]。 #### 完整示例 以下是一个可运行的完整示例，复制到 HTML 文件即可测试： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>按钮提交事件示例</title> </head> <body> <form id="myForm" action="/submit-url" method="POST"> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <input type="button" id="submitButton" value="提交"> </form> <script> document.getElementById('submitButton').addEventListener('click', function() { alert('表单即将提交！'); // 可选：添加确认提示 document.getElementById('myForm').submit(); }); </script> </body> </html> ``` - **效果**：点击按钮后，表单数据将提交到指定 URL（需替换 `action` 属性为您的后端接口）。 ### 相关问题 1. 如何为动态生成的按钮添加事件监听器[^5]？ 2. 在哪些场景下使用 `<button>` 标签比 `<input type="button">` 更合适[^1]？ 3. 如何防止表单重复提交（例如添加按钮禁用逻辑）？ [^1]: 在 W3C 浏览器中，`input type="button"` 不会自动提交表单，而 `<button>` 标签会触发提交，需注意浏览器兼容性差异。 [^5]: 使用 `addEventListener` 方法可以为动态生成的元素绑定事件，确保代码灵活性和可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值