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

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> 

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;} 

jQuery
Zuerst muss die jQuery-Bibliothek vorinstalliert werden.

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

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); 
} 

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(""); 
}); 

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.