Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

So geben Sie ein Formular mit Strg + Eingabe auf

by
Difficulty:BeginnerLength:ShortLanguages:

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

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, möchten Sie nicht zu der Maus wechseln, um auf die Schaltfläche zu klicken. Diese Dienste helfen uns, indem wir control + enter zum Senden drücken können. Lassen Sie uns dieses Szenario für unsere eigenen Projekte neu erstellen.

Bevorzugen Video?


Der Grund, warum wir uns nicht einfach enter können, ist, dass wir ein textarea verwenden, so dass der Benutzer Zeilenumbrüche einfügen kann. Normalerweise ignoriert der Browser einfach den control schlüssel und fügt einen weiteren Zeilenumbruch hinzu, wenn wir control + enter drücken, aber wir werden dies abfangen und unsere Magie ausführen.


Schritt 1: Die Vorlage

Wir sind nicht hier, um so viel über HTML und CSS zu sprechen, also hier ist das "Template", mit dem wir beginnen:


Schritt 2: Der HTML-Code

Wir brauchen ein paar Elemente, mit denen wir arbeiten können, also fügen wir sie hinzu:

Ich vereinfache das hier sehr: Wir haben nur ein textarea und einen button. Wenn dies der Fall wäre, würden wir hier ein offizielles form wünschen, das funktionieren würde und Ihre Botschaft ohne JavaScript übermitteln würde. Wir nehmen auch jQuery und ein leeres Skript-Tag auf, das wir als nächstes nutzen werden.


Schritt 3: Das JavaScript

Wir machen das als jQuery-Plugin, das wir ctrlEnter aufrufen. Hier beginnen wir mit:

Wir nehmen zwei Parameter. Wir werden diese Plugin-Funktion auf dem textarea aufrufen, also haben wir dieses Element bereits. Der erste Parameter ist eine Zeichenfolge aus einem oder mehreren Selektoren, die an jQuery übergeben werden. Dies sind Elemente, die beim Anklicken die gleiche Funktionalität haben müssen. Der zweite Parameter ist die Funktion, die ausgeführt wird, wenn control + enter gedrückt wird. Dann erstellen wir Variablen: das jQueryified textarea und das jQueryified btns.

Als nächstes erstellen wir eine Funktion, die die übergebene Funktion umschließt. Wir tun dies, damit wir sicherstellen können, dass die Funktion mit dem textarea-Element innerhalb der Funktion this aufgerufen wird. Wir übergeben es auch das Ereignisobjekt von dem Ereignis.

Als nächstes haben wir die eigentlichen Event-Handler. Die erste verdrahtet eine Funktion für das keydown-Ereignis auf dem textarea Element. e.keyCode === 13 bedeutet, dass die Eingabetaste gedrückt wird.  Wenn e.ctrlKey wahr ist, bedeutet dies, dass der Benutzer die Steuertaste gedrückt hat, als die Eingabetaste gedrückt wurde. Wenn die Eingabetaste und die Steuertaste beide gedrückt werden, rufen wir diese performAction-Funktion auf.  Dann rufen wir e.preventDefault auf, wodurch der Zeilenumbruch verhindert wird, mit dem die Eingabetaste normalerweise schreiben würde.

Und jetzt, lassen Sie uns die Event-Handler an die Tasten anschließen; Wir nehmen einfach den Text, ersetzen alle Vorkommen von \n mit <br/>, fügen es in einen Absatz ein und fügen es dem Körper voran:

Lass es uns jetzt testen:


Schlusswort: Ende

Das ist dein schneller Tipp für den Tag. Haben Sie eine andere Methode, dies zu tun? Hit die Kommentare!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.