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