在前端开发中，禁用提交按钮是一种常见的技术。这个技术可以确保用户只能点击一次提交按钮，从而防止多次提交表单数据。本文将介绍如何使用JavaScript来实现这个功能。
步骤
以下是实现该功能的步骤：
- 确定你的HTML表单代码中的提交按钮，并给它一个唯一的id属性。
<form> ... <input type="submit" id="submit-btn" value="提交"> </form>
- 添加一个事件监听器，以便在用户点击提交按钮时执行代码。
const btn = document.getElementById('submit-btn');
btn.addEventListener('click', function() {
// 在这里添加你的代码
});- 在事件监听器内部，使用
preventDefault()方法阻止表单默认的提交行为，并使用disabled属性禁用提交按钮。
const form = document.querySelector('form');
const btn = document.getElementById('submit-btn');
btn.addEventListener('click', function(event) {
event.preventDefault(); // 阻止表单提交
this.disabled = true; // 禁用提交按钮
form.submit(); // 提交表单
});在这个代码片段中，我们先用querySelector()方法获取了表单元素，然后使用this关键字引用提交按钮，并将其disabled属性设置为true。最后，我们调用submit()方法提交表单。由于在事件监听器内部阻止了表单默认的提交行为，所以我们需要显式地调用submit()方法以提交表单数据。
示例代码
以下是示例代码，展示如何禁用提交按钮：
-- -------------------- ---- -------
--------- -----
----- -------------------
------
----- ----------------
-----------------------
-------
------
------
------ ----------------------
------ ----------- --------- --------------------
------ ---------------------------
------ ------------ ---------- ---------------------
------ ------------- --------------- -----------
-------
--------
----- ---- - -------------------------------
----- --- - --------------------------------------
----------------------------- --------------- -
----------------------- -- ------
------------- - ----- -- ------
-------------- -- ----
---
---------
-------
-------这个示例代码中的表单包含了两个输入字段和一个提交按钮。当用户点击提交按钮时，该按钮将被禁用，并且表单数据将被提交到服务器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29796