数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何禁用输入类型文本区域？
在本文中，我们将学习如何使用 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>
结论
在本文中，我们学习了如何使用 disabled 属性禁用输入类型文本区域元素。在第一个示例中，我们通过将 disabled 属性设置为 true 静态地禁用了文本区域元素。在第二个示例中，我们在表单提交时动态禁用了文本区域元素。在第三个示例中，我们使用 pointer-events CSS 属性禁用了该元素。
更新于： 2023年8月2日
651 次浏览
广告