在前端开发中，我们经常需要控制用户是否能够对某些输入字段进行编辑，例如当表单处于特定状态时禁用输入等。本文将介绍如何使用 HTML 和 JavaScript 实现停止表单中的输入字段。
HTML 禁用属性
HTML 中的 disabled 属性可以使输入字段变为只读或不可编辑状态。例如，以下代码段将创建一个禁用的输入字段：
<input type="text" name="username" value="jsmith" disabled>
上述代码将创建一个带有初始值 jsmith 的文本输入字段，并将其禁用。用户将无法编辑该字段，因为它已被灰色渲染并且不能接收键盘输入。禁用属性适用于所有输入类型（文本、密码、复选框等）和按钮元素。
JavaScript 禁用属性
我们也可以使用 JavaScript 动态地更改输入字段的 disabled 属性。
首先，我们需要获取对目标输入字段的引用。我们可以使用 querySelector 或 getElementById 方法来选择单个元素。例如，以下代码将获取 username 输入字段的引用：
const usernameInput = document.querySelector('input[name="username"]');接下来，我们可以将 disabled 属性设置为 true 来禁用输入字段：
usernameInput.disabled = true;
同样，我们可以将 disabled 属性设置为 false 来启用输入字段：
usernameInput.disabled = false;
我们还可以在 JavaScript 中更改其他输入属性，例如 value 和 placeholder 等。这为我们提供了更多的控制和灵活性。
示例
以下代码演示了如何使用 HTML 和 JavaScript 停止表单中的输入字段。当用户选择“禁用”复选框时，所有输入字段都将被禁用。当用户取消选择该复选框时，所有输入字段都将重新启用。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------
-------
------
------
----------
---------------------
------ ---------------------------
------ ----------- --------------- ------------- ---------------
----
------ --------------------------
------ --------------- --------------- ------------- -------------------
-----------
----
------ --------------- -------------------
------ ----------------------------------
-------
--------
----- --------------------- - -----------------------------------------
----- ------------- - -------------------------------------------------
----- ------------- - -------------------------------------------------
------------------------------------------------ ------- -- -
----- ---------- - ---------------------
---------------------- - -----------
---------------------- - -----------
---
---------
-------
-------以上代码会创建一个包含两个输入字段（用户名和密码）和一个复选框的表单。当用户选择“禁用输入字段”复选框时，JavaScript 将禁用所有输入字段。反之，当该复选框未被选择时，JavaScript 将启用所有输入字段。
结论
HTML 的 disabled 属性和 JavaScript 的属性更改方法是停止表单中的输入字段的两种常见方法。在实际项目中，我们通常需要根据具体需求选择适当的方法，并在代码中实现相应的逻辑来控制输入字段的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11567
