Share
Du har nog sett det på Twitter, Google+ eller Facebook. Du har en textruta, där du skriver din status / meddelande och sedan på en knapp för att skicka in den. Men om du är lat som jag gillar du inte att byta till musen för att klicka på knappen. Dessa tjänster hjälper oss ut genom att tillåta oss att trycka kontroll + skriv in att skicka in. Låt oss återskapa detta scenario för våra egna projekt.
Naturligtvis, anledningen till att vi inte kan lämna in på just stiga på beror på att vi använder en textarea, så att användaren kan inkludera radbrytningar. Normalt ignorerar webbläsaren bara kontrollera nyckeln och lägg till en annan radbrytning när vi träffar kontroll + skriv in, men vi kommer att fånga upp det här och utföra vår magi.
Vi är inte här för att prata om HTML och CSS så mycket, så här är mallen? vi börjar med:
Textfältet Enter
Vi behöver några element att arbeta med här, så låt oss lägga till dem:
Jag förenklar verkligen detta här: vi har bara en textarea och a knapp. Om det här var den verkliga affären skulle vi vilja ha en tjänsteman form här skulle det fungera och skicka ditt meddelande utan JavaScript. Vi inkluderar också jQuery och en tom skriptikett som vi kommer att dra nytta av nästa.
Vi ska göra detta som ett jQuery-plugin som vi ringer till ctrlEnter. Här är vad vi börjar med:
$ .fn.ctrlEnter = funktion (btns, fn) var thiz = $ (detta); btns = $ (btns); ;
Vi tar två parametrar. Vi kommer att ringa denna plugin-funktion på textarea, så vi har redan det elementet. Den första parametern är en sträng av en eller flera selektorer som kommer att skickas till jQuery. Dessa är element som måste ha samma funktion när de klickas. Den andra parametern är den funktion som ska utföras när kontroll + skriv in är pressad. Då skapar vi variabler: jQueryified textarea och jQueryified btns.
funktion performAction (e) fn.call (thiz, e);
Därefter skapar vi en funktion som omsluter funktionen vi passerade in. Vi gör det så att vi kan se till att funktionen heter med textarea element som detta inom funktionen. Vi passerar även det händelseobjektet från evenemanget.
Accentsconagua
thiz.bind ("keydown", funktion (e) if (e.keyCode === 13 && e.ctrlKey) performAction (e); e.preventDefault ();); btns.bind ("click", performAction); Därefter har vi själva händelsehanteraren. Den första ledningen är en funktion till nyckel ner händelse på textarea element. e.keyCode === 13 betyder att Enter-tangenten trycks in. Om e.ctrlKey Det är sant, det betyder att användaren tryckte på kontrolltangenten när Enter-tangenten trycktes. Om man trycker på inmatningsknappen och kontrollknappen, ringer vi det performAction fungera. Då ringer vi e.preventDefault, vilket kommer att förhindra den nya linjen som inmatningsnyckeln normalt skulle skriva sker.
Och nu, låt oss leda upp händelsehanterarna till knapparna; vi tar helt enkelt texten, ersätter alla händelser av \ n med
$ ("# msg"). ctrlEnter ("knapp", funktion () $ (""). Lägg till (this.val (). ersätt (/ \ n / g, "
")) .prependTo (document.body); this.val (" ");); Nu, låt oss testa det:
Vi kommer att vara ditt snabba tips för dagen. Har du en annan metod att göra detta? Hit kommentarerna!
