Wie lege ich fest, dass ein Eingabeelement deaktiviert werden soll?
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 id="Welcome-to-Tutorialspoint">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 id="Welcome-to-Tutorialspoint"> 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 id="Welcome-to-Tutorialspoint"> 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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1391
52
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten?
Apr 02, 2025 pm 06:17 PM
Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass
Apr 03, 2025 am 10:30 AM
Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.
Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor
Apr 02, 2025 am 04:27 AM
Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?
Vergleich von Browsern für reaktionsschnelles Design
Apr 02, 2025 pm 06:25 PM
Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben
Warum werden die lila abgeschnittenen Bereiche im Flex -Layout fälschlicherweise als 'Überlaufraum' betrachtet?
Apr 05, 2025 pm 05:51 PM
Fragen zu lila Schrägstrichen in Flex -Layouts Bei der Verwendung von Flex -Layouts können Sie auf einige verwirrende Phänomene stoßen, wie beispielsweise in den Entwicklerwerkzeugen (D ...
