Aktivieren / Deaktivieren der Eingabetaste mit JavaScript
- Verwenden Sie JavaScript, um die Eingabetaste zu aktivieren / deaktivieren
- Verwenden Sie jQuery, um die Eingabetaste zu aktivieren / deaktivieren
In diesem Tutorial erfahren Sie, wie Sie eine HTML-Eingabeschaltfläche mit JavaScript / JQuery aktivieren / deaktivieren.
Wir stoßen häufig auf Situationen, in denen wir eine HTML-Schaltfläche aktivieren / deaktivieren möchten, z. B. vor und nach dem Absenden eines Formulars. Der beste Weg, dies zu tun, besteht darin, die Schaltfläche mithilfe der JavaScript-DOM-Manipulation auszuwählen und ihren Status disabled in true / flase zu ändern, um den Status on / off umzuschalten. Im Folgenden sehen Sie zwei Möglichkeiten zum Deaktivieren / Aktivieren einer Schaltfläche, eine mit JavaScript und die andere mit JQuery.
Verwenden Sie JavaScript, um die Eingabetaste zu aktivieren / deaktivieren
Unten sehen Sie die Demonstration einer Schaltfläche, die aktiviert wird, wenn Text in ein Feld eingegeben und ansonsten deaktiviert wird.
HTML-Code
<input class="input" type="text" placeholder="fill me">
<button class="button">Click Me</button>
JavaScript-Code
let input = document.querySelector('.input');
let button = document.querySelector('.button');
button.disabled = true;
input.addEventListener('change', stateHandle);
function stateHandle() {
if (document.querySelector('.input').value === '') {
button.disabled = true;
} else {
button.disabled = false;
}
}
Hier speichern wir zuerst den Verweis auf Eingabe und Schaltfläche in zwei Variablen und setzen dann den Standardstatus der Schaltfläche auf deaktiviert. Wir fügen einen Ereignis-Listener hinzu, um festzustellen, ob sich im Textfeld eine Eingabeaktivität befindet, und verwenden dann die Funktion stateHandle(), um die Senden-Schaltfläche entsprechend zu deaktivieren / aktivieren.
Verwenden Sie jQuery, um die Eingabetaste zu aktivieren / deaktivieren
<html>
<head>
<title>Enable/Disable a HTML button</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
Name: <input type="text" id="reco" />
<input type="submit" id="submit" disabled="disabled" />
</body>
<script>
$(document).ready(function () {
$('#reco').on('input change', function () {
if ($(this).val() != '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
});
});
</script>
</html>
Wir verwenden die Funktion ready(), um sie nach dem Laden des Dokuments verfügbar zu machen. Die Methode .on() hängt dann den Ereignishandler an das Eingabefeld an. Das Ereignis change prüft das Eingabefeld auf Änderungen und führt die Funktion entsprechend aus. Die Methode .prop() ändert dann den Status der Schaltfläche.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn