javascript add dom disabled

📌 相关文章

📜 javascript add dom disabled - Javascript (1)

📅 最后修改于: 2023-12-03 14:42:23.595000 🧑 作者: Mango

简介

在开发网页应用时，经常需要禁用某些按钮或输入框，以防止用户重复提交表单或输入不合法信息。JavaScript 提供了一种简单的方法来禁用 DOM 元素：通过设置 disabled 属性。

使用方法

获取 DOM 元素

在 JavaScript 中，可以使用 document.getElementById() 方法来获取指定 id 的 DOM 元素，例如：

var button = document.getElementById("myButton");
var input = document.getElementById("myInput");

禁用 DOM 元素

获取到 DOM 元素后，可以设置其 disabled 属性为 true 来禁用该元素，例如：

button.disabled = true;
input.disabled = true;

取消禁用 DOM 元素

同样地，如果需要取消禁用 DOM 元素，只需要将其 disabled 属性设置为 false，例如：

button.disabled = false;
input.disabled = false;

示例代码

以下是一个例子，演示如何在用户单击按钮后禁用按钮和输入框，并在 3 秒后重新启用它们：

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Add DOM Disabled Example</title>
    <script>
      function disableButtonAndInput() {
        var button = document.getElementById("myButton");
        var input = document.getElementById("myInput");

        button.disabled = true;
        input.disabled = true;

        setTimeout(function() {
          button.disabled = false;
          input.disabled = false;
        }, 3000);
      }
    </script>
  </head>
  <body>
    <h1>JavaScript Add DOM Disabled Example</h1>
    <button id="myButton" onclick="disableButtonAndInput()">Click me!</button>
    <input type="text" id="myInput">
  </body>
</html>

点击按钮后，按钮和输入框将被禁用，三秒后将重新启用。