Heim > Web-Frontend > js-Tutorial > Wie deaktiviere und aktiviere ich eine Senden-Schaltfläche basierend auf der Textfeldeingabe in jQuery?

Wie deaktiviere und aktiviere ich eine Senden-Schaltfläche basierend auf der Textfeldeingabe in jQuery?

Patricia Arquette
Freigeben: 2024-11-10 15:04:03
Original
1034 Leute haben es durchsucht

How to Disable and Enable a Submit Button Based on Text Field Input in jQuery?

Senden-Schaltfläche in jQuery basierend auf Textfeldeingaben deaktivieren und aktivieren

Das Problem verstehen:

Sie möchten steuern der aktivierte/deaktivierte Status einer Senden-Schaltfläche basierend auf dem Inhalt eines Textfelds. Die Herausforderung entsteht, wenn das Textfeld wieder leer wird und die Schaltfläche „Senden“ erneut deaktiviert werden muss.

Die Lösung:

Legen Sie zunächst das Attribut „disabled“ fest Schaltfläche „Senden“:

$(document).ready(function() {
  $(':input[type="submit"]').prop('disabled', true);
});
Nach dem Login kopieren

Verarbeiten Sie als Nächstes das Keyup-Ereignis des Textfelds, um seinen Inhalt zu überwachen:

$('input[type="text"]').keyup(function() {
  var text = $(this).val();

  // If the text field is not empty, enable the submit button.
  if (text != '') {
    $(':input[type="submit"]').prop('disabled', false);
  }

  // If the text field becomes empty, disable the submit button.
  else {
    $(':input[type="submit"]').prop('disabled', true);
  }
});
Nach dem Login kopieren

Mit diesem Ansatz können Sie die Schaltfläche „Senden“ dynamisch deaktivieren und aktivieren über das Vorhandensein einer Eingabe im Textfeld.

Das obige ist der detaillierte Inhalt vonWie deaktiviere und aktiviere ich eine Senden-Schaltfläche basierend auf der Textfeldeingabe in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage