資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 或 JavaScript 停用表單欄位？
可以使用 CSS 和 JavaScript 停用表單欄位。在本文中，我們將學習如何使用 CSS 停用表單輸入欄位。
有時我們需要出於各種原因停用表單欄位，例如在某些條件之前阻止使用者輸入，或出於其他目的。停用的表單欄位表示使用者無法與輸入欄位互動。
停用表單欄位的方法
停用表單輸入欄位有兩種方法，我們將結合程式碼示例詳細解釋每種方法。
使用 CSS 停用表單欄位
要使用 CSS 停用表單輸入欄位，我們將使用 CSS pointer-event 和 opacity 屬性。CSS pointer-event 屬性控制元素如何響應指標事件，例如滑鼠點選、滑鼠懸停和滑鼠移動。另一方面，CSS opacity 屬性控制元素的透明度。不透明度決定隱藏元素的內容可見程度。
示例
在這個示例中，我們將使用上面描述的 CSS 方法停用表單輸入欄位。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Disable Form Fields with CSS</title>
<style>
form {
width: 400px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-top: 10px;
}
input,
textarea {
width: 100%;
padding: 8px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
input,
textarea,
button {
pointer-events: none;
opacity: 0.5;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<form action="#">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>
使用 CSS 和 JavaScript 停用表單欄位
在本節中，我們將使用 CSS pointer-event 和 opacity 屬性來停用表單輸入欄位。在這裡，JavaScript 用於新增名為 .disabled 的類，並且 .disabled 類添加了一些 CSS 樣式來停用輸入欄位。
示例
在這個示例中，我們將使用上面描述的 CSS 和 JavaScript 方法停用表單輸入欄位。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Disable Form Fields with CSS & JS</title>
<style>
form {
width: 400px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-top: 10px;
}
input,
textarea {
width: 100%;
padding: 8px 0;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="button"] {
background-color: rgb(44, 157, 48);
}
.disabled input,
.disabled textarea {
pointer-events: none;
opacity: 0.5;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<form id="myForm" action="#">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>
<input type="button" id="disable-field"
value="Disable Input Fileds">
</form>
<script>
document.getElementById('disable-field').addEventListener('click', function() {
const form = document.getElementById('myForm');
form.classList.toggle('disabled');
});
</script>
</body>
</html>
更新於: 2024-07-30
330 次瀏覽
廣告