資料結構
網路
關係資料庫管理系統
作業系統
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 次瀏覽
廣告