Heim > Web-Frontend > js-Tutorial > So verwenden Sie JQuery, um Strg Enter zu implementieren, um eine form_jquery zu senden

So verwenden Sie JQuery, um Strg Enter zu implementieren, um eine form_jquery zu senden

WBOY
Freigeben: 2016-05-16 15:35:35
Original
1289 Leute haben es durchsucht

Manchmal verwenden wir Tastaturtastenkombinationen anstelle der Maus, um Ärger zu vermeiden. Heute verwenden wir JQuery, um Strg Enter zum Absenden des Formulars zu implementieren.

Wenn wir Beiträge veröffentlichen, können Sie nach der Eingabe des Inhalts in das Inhaltseingabefeld auf die Schaltfläche „Senden“ klicken, um den Inhalt zu veröffentlichen. Wenn Sie jedoch „faul“ genug sind, können Sie das Formular absenden und die Inhaltsveröffentlichung abschließen, indem Sie die Strg-Eingabetaste auf der Tastatur gedrückt halten, ohne die Maus zu bewegen.
Da es sich bei dem Eingabefeld um ein mehrzeiliges Texteingabefeld handelt, wissen wir natürlich, dass durch Drücken der Eingabetaste im Textfeld die Zeile geändert werden kann und das Formular nicht direkt gesendet werden kann (Senden). Standardmäßig ignoriert der Browser die Strg-Taste . . Dann können wir Javascript-Skripte verwenden, um die Verwendung von Strg-Eingabetastenkombinationen zum Vervollständigen der Formularübermittlung zu steuern. In diesem Artikel werden Beispiele verwendet, um die Auswirkung der Strg-Eingabe-Formularübermittlung basierend auf jQuery zu erläutern.
HTML
Im Seitentext platzieren wir ein Textfeld-Eingabefeld, eine Senden-Schaltfläche und ein div#result, das die übermittelten Ergebnisse anzeigt.

<div id="result"></div> 
<textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea> 
<button type="submit">提 交</button><span>可按“Ctrl+Enter”键提交</span> 
Nach dem Login kopieren

CSS
Schreiben Sie einfach ein paar CSS-Zeilen, um das Textfeld-Eingabefeld, die Schaltfläche „Senden“ und den .post-Stil für die Anzeige von Inhalten nach der Übermittlung zu ändern.

textarea {display:block; width:450px;height:100px;border: 1px solid #ccc;} 
button {border: 1px solid #ccc; background: #ececec;-webkit-border-radius: 3px; 
-moz-border-radius: 3px;margin-top: 10px;padding: 5px 20px; cursor:pointer} 
.post{width: 230px;border: 1px solid #ccc;background: #ececec; padding: 10px; margin: 10px 0;} 
Nach dem Login kopieren

jQuery
Zuerst muss die jQuery-Bibliothek vorinstalliert werden.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
Nach dem Login kopieren

Lassen Sie uns ein einfaches Plug-in ctrlEnter() schreiben, das zwei Parameter benötigt. Der erste Parameter btns stellt das Element dar, auf das das Plug-in einwirkt, und der zweite Parameter Jeder Parameter fn repräsentiert die aufgerufene Funktion. Wir fügen dem Plug-in die Funktion performAction() hinzu, um sicherzustellen, dass es intern aufgerufen wird. Dann beginnt das Plug-in, auf Tastaturereignisse zu warten, wenn eine Taste auf der Tastatur gedrückt wird, ermittelt es, ob die Eingabetaste und die Strg-Taste gedrückt sind, ruft dann performAction() auf und verhindert den standardmäßigen Wagenrücklauf und Zeilenvorschub Verhalten. . Dann sollten wir auch das Click-Ereignis an die Schaltfläche binden und performAction() aufrufen, damit der Inhalt durch Klicken auf die Schaltfläche übermittelt werden kann.

$.fn.ctrlEnter = function (btns, fn) { 
   var thiz = $(this); 
   btns = $(btns); 
     
   function performAction (e) { 
     fn.call(thiz, e); 
   }; 
   thiz.bind("keydown", function (e) { 
    if (e.keyCode === 13 && e.ctrlKey) { 
      performAction(e); 
      e.preventDefault(); //阻止默认回车换行 
    } 
   }); 
   btns.bind("click", performAction); 
} 
Nach dem Login kopieren

Rufen Sie abschließend ctrlEnter auf, um den Inhalt im Textbereich an #result zu übermitteln, ersetzen Sie den Wagenrücklauf durch br und löschen Sie den Textbereich. Natürlich sollte in tatsächlichen Anwendungen der Inhalt an das Hintergrundverarbeitungsprogramm gesendet werden, und das Hintergrundprogramm PHP und andere Prozesse sollten die Inhalts- und Dateninteraktion verarbeiten.

$("#msg").ctrlEnter("button", function () { 
    $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow') 
.appendTo("#result"); 
    this.val(""); 
}); 
Nach dem Login kopieren

Im Folgenden erfahren Sie, wie Sie mit JQuery die Eingabetaste drücken, um ein Formular einzureichen. Ich hoffe, dass dieser Artikel für Ihr Studium hilfreich ist.

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