Heim > Web-Frontend > Front-End-Fragen und Antworten > So verhindern Sie, dass Benutzer Inhalte in das Eingabefeld in jquery eingeben

So verhindern Sie, dass Benutzer Inhalte in das Eingabefeld in jquery eingeben

PHPz
Freigeben: 2023-04-10 15:56:29
Original
1450 Leute haben es durchsucht

Bei der Webentwicklung ist es manchmal erforderlich, den Eingabeinhalt des Benutzers im Eingabefeld einzuschränken. Zu diesem Zeitpunkt müssen einige jQuery-Methoden verwendet werden, um das Eingabefeld zu bedienen. In diesem Artikel wird hauptsächlich die Verwendung von jQuery vorgestellt, um zu verhindern, dass Benutzer Inhalte in das Eingabefeld eingeben.

1. Die Standardfunktion zum Deaktivieren des Eingabefelds

Bevor wir die Eingabe im Eingabefeld über jQuery deaktivieren, müssen wir zunächst das Typattribut des Eingabe-Tags verstehen.

  1. Text: Textbox Datum: Datumsauswahl Gerät
  2. Nummer: Nummerneingabefeld
  3. E-Mail: E-Mail-Eingabefeld
  4. Telefon: Telefonnummer-Eingabefeld
  5. Suche: Sucheingabefeld
  6. Hier ist der Code, der jQuery verwendet, um die Standardfunktion von zu deaktivieren das Eingabefeld:
  7. $(document).ready(function() {
      // 禁止文本框和密码框的默认功能
      $('input[type="text"],input[type="password"]').bind('keypress', function(event) {
        if (event.keyCode == 13) {
          event.preventDefault();
        }
      });
    });
    Nach dem Login kopieren
  8. Im obigen Code verwenden wir zunächst die .ready()-Methode von jQuery, um auf das Laden der Seite zu warten, und binden dann das .keypress-Ereignis, um die standardmäßige Wagenrücklauf-Übermittlungsfunktion des Eingabefelds zu verhindern. Unter diesen repräsentiert event.keyCode den gedrückten Tastaturtastencode und 13 den keyCode der Eingabetaste.
  9. 2. Eingabe in das Eingabefeld deaktivieren
  10. Manchmal müssen wir Benutzern die Eingabe von Text in das Eingabefeld verbieten. Der folgende Code zeigt die Verwendung von jQuery zum Deaktivieren der Eingabe in das Eingabefeld:
  11. $(document).ready(function() {
      // 禁止文本框和密码框输入
      $('input[type="text"],input[type="password"]').bind('input propertychange', function(event) {
        this.value = this.value.replace(/[^\u0000-\u00ff]/g, ''); // 只允许输入英文、数字和中文等ASCII字符
      });
    });
    Nach dem Login kopieren
  12. Im obigen Code , binden wir die Ereignisse .input und .propertychange, um Inhaltsänderungen im Eingabefeld zu überwachen. In der Ereignisverarbeitungsfunktion haben wir die Methode replace () des String-Objekts aufgerufen, um Nicht-ASCII-Zeichen durch den regulären Ausdruck /
  13. 1
  14. /g herauszufiltern und so den Effekt zu erzielen, dass die Eingabe verboten wird.
  15. 3. Eingabefelder deaktivieren

Manchmal müssen wir alle Eingabefelder deaktivieren. Im folgenden Code verwenden wir jQuery, um die Eingabefelder zu deaktivieren pass. Die Methode attr() setzt ihnen ein „disabled“-Attribut und deaktiviert damit alle Eingabefelder.

4. Ein einzelnes Eingabefeld deaktivieren

Manchmal müssen wir nur ein einzelnes Eingabefeld deaktivieren. Das Folgende ist der Code, um mit jQuery ein einzelnes Eingabefeld zu deaktivieren:

$(document).ready(function() {
  // 禁用所有输入框
  $('input').attr('disabled', 'disabled');
});
Nach dem Login kopieren

Im obigen Code erhalten wir ihn der Selektor „#“ + id Geben Sie die Eingabefelder an und legen Sie über die Methode .attr() ein „disabled“-Attribut für sie fest, wodurch die angegebenen Eingabefelder deaktiviert werden.

Zusammenfassung: In diesem Artikel werden hauptsächlich einige Methoden zur Verwendung von jQuery zum Deaktivieren der Eingabefeldeingabe vorgestellt, einschließlich der Deaktivierung der Standardfunktion des Eingabefelds, der Deaktivierung der Eingabefeldeingabe, der Deaktivierung aller Eingabefelder und der Deaktivierung eines einzelnen Eingabefelds. Ich hoffe, dass es Ihnen bei Ihrer eigentlichen Arbeit in der Webentwicklung hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass Benutzer Inhalte in das Eingabefeld in jquery eingeben. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage