So senden Sie ein Formular mit Strg + Eingabetaste

Sie haben es wahrscheinlich auf Twitter, Google+ oder Facebook gesehen. Sie haben ein Textfeld, in das Sie Ihren Status / Ihre Nachricht schreiben und dann auf eine Schaltfläche klicken, um sie zu senden. Aber wenn Sie wie ich faul sind, wechseln Sie nicht gerne mit der Maus, um auf die Schaltfläche zu klicken. Diese Dienste helfen uns, indem sie uns die Presse erlauben Strg + Eingabetaste einreichen. Lassen Sie uns dieses Szenario für unsere eigenen Projekte neu erstellen.

Video bevorzugen?

Natürlich ist der Grund, aus dem wir uns nicht einfach ergeben können eingeben ist, weil wir eine verwenden werden Textbereich, damit der Benutzer Zeilenumbrüche einschließen kann. Normalerweise ignoriert der Browser die Steuerung Taste und fügen Sie einen weiteren Zeilenumbruch hinzu, wenn Sie die Taste drücken Strg + Eingabetaste, Aber wir werden dies abfangen und unsere Magie durchführen.

Schritt 1: Die Vorlage

Wir sind nicht hier, um so viel über HTML und CSS zu sprechen, also hier die "Vorlage". Wir beginnen mit:

    Textfeld Enter

Schritt 2: Das HTML

Wir brauchen ein paar Elemente, um hier zu arbeiten, also fügen wir sie hinzu:

Ich vereinfache das hier wirklich: Wir haben nur eine Textbereich und ein Taste. Wenn dies der wirkliche Deal wäre, würden wir einen Beamten wollen bilden Hier würde das funktionieren und Ihre Nachricht ohne JavaScript senden. Wir enthalten auch jQuery und ein leeres Skript-Tag, das wir als nächstes nutzen werden.

Schritt 3: Das JavaScript

Wir werden dies als jQuery-Plugin machen, das wir anrufen ctrlEnter. Wir beginnen mit:

$ .fn.ctrlEnter = function (btns, fn) var thiz = $ (this); btns = $ (btns); ;

Wir nehmen zwei Parameter an. Wir werden diese Plugin-Funktion auf der Textbereich, also haben wir dieses element schon. Der erste Parameter ist eine Zeichenfolge aus einem oder mehreren Selektoren, die an jQuery übergeben werden. Dies sind Elemente, die beim Klicken die gleiche Funktionalität haben müssen. Der zweite Parameter ist die Funktion, die ausgeführt wird, wenn Strg + Eingabetaste wird gedrückt. Dann erstellen wir Variablen: das jQueryified Textbereich und das jQueryified btns.

Funktion performAction (e) fn.call (thiz, e);

Als Nächstes erstellen wir eine Funktion, die die übergebene Funktion einschließt. Wir machen dies, damit wir sicherstellen können, dass die Funktion mit der aufgerufen wird Textbereich Element als diese innerhalb der Funktion. Wir übergeben auch das Ereignisobjekt aus dem Ereignis.

thiz.bind ("keydown", Funktion (e) if (e.keyCode === 13 && e.ctrlKey) performAction (e); e.preventDefault ();); btns.bind ("click", performAction);

Als nächstes haben wir die eigentlichen Event-Handler. Die ersten verbinden eine Funktion mit der Taste nach unten Veranstaltung auf der Textbereich Element. e.keyCode === 13 bedeutet, dass die Eingabetaste gedrückt wird. Ob e.ctrlKey ist wahr, das heißt, der Benutzer hat die Steuertaste gedrückt, als die Eingabetaste gedrückt wurde. Wenn sowohl die Eingabetaste als auch die Steuertaste gedrückt werden, rufen wir das an performAction Funktion. Dann rufen wir an e.preventDefault, Dadurch wird verhindert, dass die Newline, die die Eingabetaste normalerweise schreiben würde.

Und jetzt lassen Sie uns die Event-Handler mit den Schaltflächen verbinden. Wir nehmen einfach den Text und ersetzen alle Vorkommnisse von \ n mit , füge es in einen Absatz ein und stelle es dem Körper voran:

$ ("# msg"). ctrlEnter ("button", function () $ (""). append (this.val (). replace (/ \ n / g, "
")). prependTo (document.body); this.val (" "););

Jetzt testen wir es:

Fazit: Das Ende

Wir werden den schnellen Tipp für den Tag geben. Haben Sie eine andere Methode, dies zu tun? Treffen Sie die Kommentare!

Code