如何禁用输入类型文本区域?

htmlweb developmentfront end technology更新于 2024/11/12 11:56:17

在本文中，我们将学习如何借助 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>

总结

在本文中，我们学习了如何使用 help disabled 属性禁用输入类型文本区域元素。在第一个示例中，我们通过将 disabled 属性设置为 true 来静态禁用文本区域元素。在第二个示例中，我们在提交表单时动态禁用了文本区域元素。在第三个示例中，我们使用 pointer-events CSS 属性禁用了该元素。