Share
Du har sikkert sett den på Twitter, Google+ eller Facebook. Du har en tekstboks, der du skriver status / melding og deretter klikker du en knapp for å sende den. Men hvis du er lat som meg, liker du ikke å bytte til musen for å klikke på knappen. Disse tjenestene hjelper oss med å tillate oss å trykke kontroll + skriv inn å sende inn. La oss gjenskape dette scenariet for våre egne prosjekter.
Selvfølgelig, grunnen til at vi ikke kan sende inn på nettopp Tast inn er fordi vi skal bruke en textarea, slik at brukeren kan inkludere linjeskift. Normalt vil nettleseren bare ignorere styre nøkkel og legg til en annen linjeskift når vi treffer kontroll + skriv inn, men vi vil fange opp dette og utføre vår magi.
Vi er ikke her for å snakke om HTML og CSS så mye, så her er "mal"? vi starter med:
Tekstboks Skriv inn
Vi trenger noen elementer å jobbe med her, så la oss legge til dem:
Jeg forenkler virkelig dette her: vi har bare a textarea og a knapp. Hvis dette var den virkelige avtalen, ville vi ha en offisiell skjema her, det ville fungere og sende inn meldingen din uten JavaScript. Vi inkluderer også jQuery og en tom skriptetikett som vi vil dra nytte av neste.
Vi skal gjøre dette som et jQuery-plugin som vi skal ringe ctrlEnter. Her begynner vi med:
$ .fn.ctrlEnter = funksjon (btns, fn) var thiz = $ (dette); btns = $ (btns); ;
Vi tar to parametere. Vi kaller denne plugin-funksjonen på textarea, så vi har allerede det elementet. Den første parameteren er en streng av en eller flere selektorer som sendes til jQuery. Dette er elementer som må ha samme funksjonalitet når de klikkes. Den andre parameteren er funksjonen som skal utføres når kontroll + skriv inn er trykket. Deretter skaper vi variabler: jQueryified textarea og jQueryified btns.
funksjon performAction (e) fn.call (thiz, e);
Deretter oppretter vi en funksjon som bryter inn funksjonen vi passerte inn. Vi gjør dette slik at vi kan sørge for at funksjonen kalles med textarea element som dette innenfor funksjonen. Vi overfører også det hendelsesobjektet fra arrangementet.
Accentsconagua
thiz.bind ("keydown", funksjon (e) hvis (e.keyCode === 13 && e.ctrlKey) performAction (e); e.preventDefault ();); btns.bind ("click", performAction); Deretter har vi de faktiske hendelseshåndtererne. Den første ledningen er en funksjon til keydown hendelse på textarea element. e.keyCode === 13 betyr at enter-tasten blir trykket. Hvis e.ctrlKey er sant, det betyr at brukeren trykker på kontrolltasten når enter-tasten ble trykket. Hvis du trykker på enter-tasten og kontrolltasten, ringer vi det performAction funksjon. Da ringer vi e.preventDefault, som vil forhindre den nye linjen som enter-tasten normalt vil skrive, skjer.
Og nå, la oss ta opp hendelseshåndteringene til knappene; Vi tar rett og slett teksten, erstatter alle forekomster av \ n med
$ ("# msg"). ctrlEnter ("knapp", funksjon () $ (""). legg til (this.val (). erstatte (/ \ n / g, "
")) .prependTo (document.body); this.val (" ");); Nå, la oss teste det:
Vi er det er ditt raske tips for dagen. Har du en annen metode for å gjøre dette? Treff kommentarene!
