Heim > Web-Frontend > js-Tutorial > Hauptteil

Verarbeitungsmethode für die Formularübermittlung durch Drücken der Eingabetaste

巴扎黑
Freigeben: 2016-11-25 14:29:47
Original
1342 Leute haben es durchsucht

1. Wenn das Formular nur einen enthält, wird das Formular durch Drücken der Eingabetaste automatisch gesendet.

Html-Code

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; />  
</form>
Nach dem Login kopieren

Durch Drücken der Eingabetaste wird ein weiterer nicht automatisch gesendet, es wird jedoch eine unverständliche Meldung auf der Seite angezeigt. Das Eingabefeld ist ziemlich umständlich, daher habe ich zwei Lösungen aus dem Internet gefunden:

1; Fügen Sie ein hinzu und zeigen Sie dann das Eingabefeld nicht an return Es wird nicht gesendet, nachdem Sie Folgendes gedrückt haben:

Html-Code

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; />  
<input style=&#39;display:none&#39; />  
</form>
Nach dem Login kopieren

2; Fügen Sie ein Onkeydown-Ereignis hinzu und es wird dann nicht angezeigt, nachdem Sie die Eingabetaste gedrückt haben:

HTML-Code

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; onkeydown=&#39;if(event.keyCode==13) return false;&#39;/>  
</form>
Nach dem Login kopieren

Wenn Sie ein Wagenrücklaufereignis hinzufügen möchten, können Sie im onkeydown-Ereignis ein Formular zur Einreichung eines Urteils hinzufügen:

Html-Code

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input style=&#39;display:none&#39; />  
<input type=&#39;text&#39; name=&#39;name&#39; onkeydown="onKeyQuery(event);" />  
</form>
Nach dem Login kopieren

Js-Code

//回车查询  
   function onKeyQuery(e){  
       if(window.event) // IE  
       {  
           keynum = e.keyCode  
       }  
       else if(e.which) // Netscape/Firefox/Opera  
       {  
           keynum = e.which  
       }  
       if(keynum == 13){  //等于13代表 回车键  
           //具体处理在这里  
       }  
   }
Nach dem Login kopieren

Manchmal möchten wir die Eingabetaste im Textfeld (Eingabeelement) drücken, um das Formular (Formular) abzusenden, aber manchmal auch Ich will das nicht. Für das Suchverhalten möchten Sie beispielsweise direkt die Eingabetaste drücken, nachdem Sie die Schlüsselwörter eingegeben haben, um das Formular sofort abzusenden. Bei einigen komplexen Formularen möchten Sie möglicherweise vermeiden, versehentlich die Eingabetaste zu drücken, um die Formularübermittlung auszulösen, bevor das Ausfüllen des Formulars abgeschlossen ist .

Um diese Verhaltensweisen zu kontrollieren, ist es nicht nötig, auf JS zurückzugreifen. Der Browser hat dies bereits für uns erledigt:

Wenn es eine Schaltfläche mit type=" gibt. „submit“ in das Formular eingeben, greift die Enter-Taste.
Wenn im Formular nur eine Eingabe mit type="text" vorhanden ist, wird unabhängig vom Typ der Schaltfläche die Eingabetaste wirksam.
Wenn es sich bei der Schaltfläche nicht um eine Eingabe, sondern um eine Schaltfläche handelt und kein Typ hinzugefügt wird, ist die Standardeinstellung type=button im IE und type=submit in FX.
Andere Formularelemente wie Textarea und Select sind nicht betroffen, und das Optionsfeld hat keinen Einfluss auf die Auslöseregeln, reagiert jedoch auf die Eingabetaste unter FX, nicht jedoch unter IE.
Die Eingabe von type="image" hat den gleichen Effekt wie type="submit". Ich weiß nicht, warum ein solcher Typ entworfen wurde. Es wird nicht empfohlen, CSS zum Hinzufügen eines Hintergrunds zu verwenden Bild.


Verwandte Etiketten:
js
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