HTML 如何禁用文本输入框

在本文中，我们将学习如何使用disabled属性禁用文本输入框元素。

禁用输入字段在某些情况下非常有用，比如我们希望向用户显示信息，但又不希望用户能够编辑或修改该信息。例如，在文本区域内显示消息或一组指令时。这也可以在用户在提交表单过程中避免在文本区域中输入内容的情况下使用，有助于减少所发送给服务器的数据不一致性。

在此示例中，我们将使用HTML中的disabled属性来禁用文本输入框元素，该属性接受布尔值。

让我们通过一些示例来理解：

示例1

在这个例子中，我们将创建一个表单，包含不同的输入项，包括电子邮件、名字、姓氏，还有一个输入地址的文本区域，并且我们将默认禁用该文本区域输入。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable input type text area?</title>
</head>
<body>
   <h3>How to disable input type text area?</h3>

   <form id="myForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
      <input type="email" name="email" placeholder="Enter your email">
      <input type="text" name="firstName" placeholder="Enter your first name">
      <input type="text" name="lastName" placeholder="Enter your last name">
      <textarea name="address" placeholder="Enter your address" disabled="true"></textarea>
      <input type="submit" name="submit" value="Submit">
   </form>
</body>
</html>

示例2

在这个例子中，当表单提交时，我们将动态禁用文本区域元素。一旦表单提交完成，我们将启用该元素。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable input type text area?</title>
</head>
<body>
   <h3>How to disable input type text area?</h3>

   <form id="myForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
      <input type="email" name="email" placeholder="Enter your email">
      <input type="text" name="firstName" placeholder="Enter your first name">
      <input type="text" name="lastName" placeholder="Enter your last name">
      <textarea name="address" placeholder="Enter your address"></textarea>
      <input type="submit" name="submit" value="Submit">
   </form>

   <script>
      const myForm = document.getElementById('myForm');
      const inputs = myForm.querySelectorAll('input');
      const textArea = myForm.querySelector('textarea');

      myForm.addEventListener('submit', async (e) => {
         e.preventDefault();

         textArea.disabled = true;
         await new Promise((res, rej) => {
            setTimeout(() => {
               textArea.disabled = false;
               res();
            }, 2000);
         });
      });
   </script>
</body>
</html>

示例3

在此示例中，我们将使用CSS的pointer-events属性来禁用文本区输入元素，并将其设置为none，从而使其无法交互。

文件名：index.html

<html lang="en">
<head>
   <title>How to disable input type text area?</title>
   <style>
      .disabled {
         pointer-events: none;
         background-color: lightgray;
      }
   </style>
</head>
<body>
   <h3>How to disable input type text area?</h3>

   <form id="myForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
      <input type="email" name="email" placeholder="Enter your email">
      <input type="text" name="firstName" placeholder="Enter your first name">
      <input type="text" name="lastName" placeholder="Enter your last name">
      <textarea name="address" placeholder="Enter your address" disabled="true"></textarea>
      <input type="submit" name="submit" value="Submit">
   </form>

   <script>
      // Additional example: Using pointer-events property of CSS
      const addressTextArea = document.querySelector('textarea[name="address"]');
      addressTextArea.addEventListener('click', function(event) {
        event.preventDefault();
      });
      addressTextArea.classList.add('disabled');
   </script>
</body>
</html>