Hoe een formulier in te dienen met Control + Enter

Je hebt het waarschijnlijk gezien op Twitter, Google+ of Facebook. U hebt een tekstvak, waarin u uw status / bericht schrijft en vervolgens op een knop klikt om het in te dienen. Maar als je lui bent zoals ik, vind je het niet prettig om over te schakelen naar de muis om op de knop te klikken. Deze diensten helpen ons door ons toe te staan om op te drukken controle + enter indienen. Laten we dit scenario recreëren voor onze eigen projecten.

Liever video?

Natuurlijk kunnen we ons niet gewoon onderwerpen invoeren is omdat we een textarea, zodat de gebruiker regeleinden kan opnemen. Normaal negeert de browser de controle toets en voeg een nieuwe regeleinde toe wanneer we raken controle + enter, maar we zullen dit onderscheppen en onze magie uitvoeren.

Stap 1: de sjabloon

We zijn hier niet om zo veel over HTML en CSS te praten, dus hier is de? -Sjabloon? we beginnen met:

    Tekstvak Enter

Stap 2: De HTML

We hebben een paar elementen nodig om hier mee te werken, dus laten we ze toevoegen:

Ik vereenvoudig dit hier echt: we hebben alleen een textarea en een knop. Als dit de echte deal was, zouden we een official willen het formulier hier, dat zou werken en stuur je bericht zonder JavaScript. We voegen ook jQuery en een lege scripttag toe waarvan we volgende profiteren.

Stap 3: JavaScript

We gaan dit maken als een jQuery-plug-in die we zullen bellen ctrlEnter. Dit is waar we beginnen met:

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

We nemen twee parameters. We noemen deze plugin-functie op de textarea, dus we hebben dat element al. De eerste parameter is een reeks van een of meer selectors die zullen worden doorgegeven aan jQuery. Dit zijn elementen die dezelfde functionaliteit moeten hebben wanneer erop wordt geklikt. De tweede parameter is de functie die wordt uitgevoerd wanneer controle + enter is ingedrukt. Vervolgens maken we variabelen: de jQueryified textarea en de jQueryified btns.

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

Vervolgens maken we een functie die de functie bevat die we hebben ingevoerd. We doen dit zodat we kunnen zorgen dat de functie wordt aangeroepen met de textarea element als deze binnen de functie. We geven het ook door aan het evenementobject van het evenement.

thiz.bind ("keydown", functie (e) if (e.keyCode === 13 && e.ctrlKey) performAction (e); e.preventDefault ();); btns.bind ("klik", voer actie uit);

Vervolgens hebben we de feitelijke gebeurtenishandlers. De eerste draden een functie voor de toets neer evenement op de textarea element. e.keyCode === 13 betekent dat de enter-toets wordt ingedrukt. Als e.ctrlKey is waar, dat betekent dat de gebruiker op de bedieningstoets drukte toen de enter-toets werd ingedrukt. Als de Enter-toets en de Control-toets beide worden ingedrukt, dan bellen we dat actie ondernemen functie. Dan bellen we e.preventDefault, die voorkomen dat de nieuwe regel die de Enter-toets normaal zou schrijven, zou gebeuren.

En nu, laten we eventhandlers met de knoppen verbinden; we nemen gewoon de tekst, vervangen alle voorkomende gevallen van \ n met , zet het in een alinea en voeg het toe aan het lichaam:

$ ("# msg"). ctrlEnter ("knop", functie () $ (""). toevoegen (this.val (). replace (/ \ n / g, "
")). prependTo (document.body); this.val (" "););

Laten we het nu testen:

Conclusie: The End

Dat is uw snelle tip voor vandaag. Heb je nog een andere methode om dit te doen? Klik op de opmerkingen!

Code