資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學如何指定輸入元素應被停用？
在網頁上使用表單時，有時需要停用任何輸入欄位。例如，防止使用者在完成表單中的先前步驟之前不允許使用某些輸入欄位。這也可以用於防止使用者透過停用表單欄位來提交無效資料或虛假資料，直到所有必填欄位都已填寫。
為了解決上述問題，我們有不同的方法可以用來停用 HTML 中的輸入元素，例如使用“disabled”屬性、JavaScript 和 CSS。在本文中，我們將瞭解如何指定輸入元素應被停用。
無論您是剛起步的 Web 開發人員，還是希望更新知識的經驗豐富的開發人員，本文都將為您提供有效停用網頁上輸入元素所需的資訊。
停用輸入元素的不同方法
方法 1：使用“disabled”屬性
停用 HTML 輸入元素的第一種方法，或者我們可以說最簡單的方法是使用<input>元素中提供的“disabled”屬性。此屬性可以新增到任何輸入元素，並且會阻止使用者與該元素互動。
當輸入元素被停用時，它不能被編輯、選中或作為表單的一部分提交。此屬性通常用於向用戶指示輸入不可用，或防止使用者提交無效資料。
語法
以下是使用 input 元素的 disabled 屬性停用輸入元素的語法，請使用以下程式碼 -
<input type="number" name="phone" disabled>
在上面的程式碼中，我們有一個輸入欄位，其型別為數字，使用 HTML 中<input>元素的“disabled”屬性停用它。
示例
在此示例中，名為“phone”的輸入元素使用<input>元素中提供的屬性停用。使用“disabled”屬性停用輸入元素。
<html>
<head>
<title>Example to disable the input element using disabled attribute method </title>
</head>
<body>
<h2>Welcome to Tutorialspoint</h2>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone" disabled>
<br>
<label for="user">Enter your username:</label>
<input type="text" id="user" name="user">
<br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password">
<br>
<input type="add" value="Submit">
</form>
</body>
</html>
方法 2：使用 JavaScript
停用 HTML 輸入元素的第二種方法是使用 JavaScript。當需要根據使用者輸入或其他因素動態停用元素時，此方法很有用。
使用 JavaScript 方法的一個優點是它允許我們根據使用者輸入或其他條件動態新增或刪除“disabled”屬性，因為當需要根據使用者操作或其他因素停用輸入元素時，它非常有用。
此方法涉及使用 JavaScript 程式碼訪問輸入元素並將其“disabled”屬性設定為 true，並且使用相同的語法如下所示。
語法
以下是使用 JavaScript 停用輸入元素的語法，請使用以下程式碼 -
document.getElementById("disabledInputField").disabled = true;
在上面的程式碼中，我們有一段 JavaScript 程式碼，其中輸入元素的 ID 為“disabledInputField”，並且“disabled”屬性設定為 true。現在，使用此屬性，任何 ID 設定為“disabledInputField”的輸入元素都將被停用，不允許使用者訪問它。
示例
在此示例中，使用 JavaScript 停用了 id 和 name 為“name”的輸入元素。要停用輸入元素，我們有一個名為“Submit”的按鈕，並且當單擊該按鈕時會呼叫函式“disablename()”，它將“name”輸入元素的“disabled”屬性設定為 true。
<html>
<head>
<title>Example to disable the input element using JavaScript method</title>
<script>
function disableName() {
document.getElementById("name").disabled = true;
}
</script>
</head>
<body>
<h2> Welcome to Tutorialspoint </h2>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone">
<br>
<label for="user">Enter your username:</label>
<input type="text" id="user" name="user">
<br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password">
<br>
<input type="add" value="Submit">
</form>
</body>
</html>
方法 3：使用 CSS
在此方法中，我們將使用 CSS 停用輸入元素。停用輸入元素的 CSS 方法涉及使用 CSS 程式碼以一種讓使用者清楚地知道他們無法與之互動的方式來設定停用輸入元素的樣式。
語法
以下是使用 CSS 停用輸入元素的語法，請使用以下程式碼 -
input[disabled] {
opacity: 0.8;
pointer-events: none;
}
在上面的程式碼中，我們有一段 CSS 程式碼，其中輸入元素的 disabled 屬性設定為 true。在這裡，要停用輸入元素，我們將不透明度設定為 0.8，並將 pointer-events 設定為 none，因為這兩個 CSS 屬性都將啟用輸入元素被停用，最終不允許使用者訪問它。
示例
在此示例中，使用 CSS 停用了 id 和 name 為“phone”的輸入元素。要停用輸入元素，我們使用了 CSS 程式碼，其中我們將具有“disabled”屬性的任何輸入元素的不透明度設定為 0.8，並將“pointer-events”屬性設定為“none”。CSS 的所有這些屬性都將輸入元素建立為停用狀態。
<!DOCTYPE html>
<html>
<head>
<title>Example to disable the input element using CSS method</title>
<style>
input[disabled] {
opacity: 0.8;
pointer-events: none;
}
</style>
</head>
<body>
<h2> Welcome to Tutorialspoint </h2>
<form>
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name">
<br>
<label for="phone">Enter your phone number:</label>
<input type="text" id="phone" name="phone" disabled>
<br>
<label for="user">Enter your username:</label>
<input type="text" id="user" name="user">
<br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password">
<br>
<input type="add" value="Submit">
</form>
</body>
</html>
結論
在本文中，我們瞭解瞭如何停用輸入元素以及不同的方法，包括使用“disabled”屬性、JavaScript 和 CSS。在所有三種方法中，<input>元素中提供的“disabled”屬性可以防止使用者使用輸入元素。我們還詳細瞭解了使用 JavaScript 和 CSS 停用的方法。這裡每種方法都有其自身的優缺點，具體取決於專案的需要。
4K+ 閱讀量
