Heim >Web-Frontend >CSS-Tutorial >Wie lege ich fest, dass ein Eingabeelement deaktiviert werden soll?
Wie lege ich fest, dass ein Eingabeelement deaktiviert werden soll?
- PHPznach vorne
- 2023-09-04 10:09:02740Durchsuche
Bei der Verwendung von Formularen auf Webseiten müssen wir manchmal Eingabefelder deaktivieren. Beispielsweise können Benutzer daran gehindert werden, bestimmte Eingabefelder zu verwenden, bis sie vorherige Schritte in einem Formular abgeschlossen haben. Ebenso können Sie verhindern, dass Benutzer ungültige oder falsche Daten übermitteln, indem Sie Formularfelder deaktivieren, bis alle erforderlichen Felder ausgefüllt sind.
Um das oben genannte Problem zu lösen, verfügen wir über verschiedene Methoden, mit denen Eingabeelemente in HTML deaktiviert werden können, z. B. die Verwendung des Attributs „disabled“, JavaScript und CSS. In diesem Artikel erfahren Sie, wie Sie festlegen, dass ein Eingabeelement deaktiviert werden soll.
Ob Sie ein Entwickler sind, der gerade erst mit der Webentwicklung beginnt, oder ein erfahrener Entwickler, der sein Wissen auffrischen möchte, dieser Artikel liefert Ihnen die Informationen, die Sie benötigen, um Eingabeelemente auf Ihren Webseiten effektiv zu deaktivieren.
Verschiedene Möglichkeiten zum Deaktivieren von Eingabeelementen
Methode 1: Verwenden Sie das Attribut „deaktiviert“
Die erste Möglichkeit, ein HTML-Eingabeelement zu deaktivieren, oder wir können sagen, die einfachste Möglichkeit, besteht darin, das im -Element verfügbare Attribut „disabled“ zu verwenden. Dieses Attribut kann zu jedem Eingabeelement hinzugefügt werden und verhindert, dass der Benutzer mit diesem Element interagiert.
Wenn ein Eingabeelement deaktiviert ist, kann es nicht bearbeitet, ausgewählt oder als Teil eines Formulars übermittelt werden. Dieses Attribut wird normalerweise verwendet, um dem Benutzer anzuzeigen, dass die Eingabe nicht verfügbar ist, oder um zu verhindern, dass der Benutzer ungültige Daten übermittelt.
Grammatik
Im Folgenden finden Sie die Syntax zum Deaktivieren eines Eingabeelements mithilfe seines Attributs „disabled“. Bitte verwenden Sie den folgenden Code:
<input type="number" name="phone" disabled>
Im obigen Code haben wir ein Eingabefeld vom Typ Nummer, das mithilfe des „disabled“-Attributs des -Elements in HTML deaktiviert werden kann.
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
In diesem Beispiel wird das Eingabeelement mit dem Namen „Telefon“ mithilfe der im -Element verfügbaren Attribute deaktiviert. Das Attribut „disabled“ deaktiviert das Eingabeelement.
<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>
Methode 2: Verwendung von JavaScript
Die zweite Möglichkeit, HTML-Eingabeelemente zu deaktivieren, ist die Verwendung von JavaScript. Dieser Ansatz ist nützlich, wenn Sie Elemente basierend auf Benutzereingaben oder anderen Faktoren dynamisch deaktivieren müssen.
Ein Vorteil der Verwendung des JavaScript-Ansatzes besteht darin, dass wir das Attribut „deaktiviert“ basierend auf Benutzereingaben oder anderen Bedingungen dynamisch hinzufügen oder entfernen können, da es sehr nützlich ist, wenn ein Eingabeelement aufgrund einer Benutzeraktion oder anderen Bedingungen deaktiviert werden muss Faktoren.
Bei dieser Methode wird JavaScript-Code verwendet, um auf das Eingabeelement zuzugreifen und dessen „disabled“-Attribut auf „true“ zu setzen. Die Syntax für die Verwendung dieser Methode lautet wie folgt.
Grammatik
Hier ist die Syntax zum Deaktivieren eines Eingabeelements mithilfe von JavaScript. Verwenden Sie den folgenden Code:
document.getElementById("disabledInputField").disabled = true;
Im obigen Code haben wir einen JavaScript-Code, bei dem die ID des Eingabeelements „disabledInputField“ lautet und das Attribut „disabled“ auf „true“ gesetzt ist. Jetzt wird jedes Eingabeelement mit der ID „disabledInputField“ deaktiviert, sodass Benutzer nicht darauf zugreifen können.
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
In diesem Beispiel wird JavaScript verwendet, um das Eingabeelement zu deaktivieren, dessen ID und Name beide „name“ sind. Um ein Eingabeelement zu deaktivieren, haben wir eine Schaltfläche namens „Senden“. Wenn auf die Schaltfläche geklickt wird, wird eine Funktion namens „disablename()“ aufgerufen und das Attribut „disabled“ des Eingabeelements „name“ auf „true“ gesetzt.
<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>
Methode 3: CSS verwenden
In dieser Methode verwenden wir CSS, um das Eingabeelement zu deaktivieren. Die CSS-Methode zum Deaktivieren eines Eingabeelements umfasst die Verwendung von CSS-Code zur Formatierung des deaktivierten Eingabeelements, um dem Benutzer klar anzuzeigen, dass er nicht damit interagieren kann.
Grammatik
Unten finden Sie die Syntax zum Deaktivieren von Eingabeelementen mithilfe von CSS. Bitte verwenden Sie den folgenden Code -
input[disabled] {
opacity: 0.8;
pointer-events: none;
}
Im obigen Code haben wir einen CSS-Code, bei dem das Eingabeelement das Attribut „disabled“ auf „true“ gesetzt hat. Um das Eingabeelement zu deaktivieren, setzen wir hier die Deckkraft auf 0,8 und pointer-events auf „none“, da beide CSS-Eigenschaften das Eingabeelement deaktivieren und dem Benutzer letztendlich keinen Zugriff darauf ermöglichen.
Die chinesische Übersetzung vonBeispiel
lautet:Beispiel
In diesem Beispiel wird das Eingabeelement mit der ID und dem Namen „Telefon“ mithilfe von CSS deaktiviert. Um Eingabeelemente zu deaktivieren, haben wir CSS-Code verwendet, um die Deckkraft jedes Eingabeelements mit dem Attribut „disabled“ auf 0,8 und dem Attribut „pointer-events“ auf „none“ festzulegen. Alle diese CSS-Eigenschaften deaktivieren das Eingabeelement.
<!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>
Fazit
In diesem Artikel haben wir gesehen, wie man Eingabeelemente und verschiedene Methoden mithilfe des „disabled“-Attributs, JavaScript und CSS deaktiviert. Bei diesen drei Methoden wird das Attribut „disabled“ auf das -Element angewendet und verhindert, dass der Benutzer das Eingabeelement verwendet. Wir beschreiben auch Möglichkeiten zur Deaktivierung mithilfe von JavaScript und CSS. Jede Methode hat ihre Vor- und Nachteile, abhängig von den Anforderungen des Projekts.
Das obige ist der detaillierte Inhalt vonWie lege ich fest, dass ein Eingabeelement deaktiviert werden soll?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!