Share
Probabil că ați văzut-o pe Twitter, pe Google+ sau pe Facebook. Aveți o casetă de text, în care scrieți starea / mesajul dvs. și apoi faceți clic pe un buton pentru al trimite. Dar, dacă sunteți leneși ca mine, nu vă place să comutați la mouse pentru a face clic pe buton. Aceste servicii ne ajută, oferindu-ne o presiune controlați + introduceți a inregistra, a valida. Să recreăm acest scenariu pentru propriile noastre proiecte.
Desigur, motivul pentru care nu ne putem supune doar introduce se datorează faptului că vom folosi a textarea, astfel încât utilizatorul să poată include pauze de linie. În mod normal, browserul va ignora Control cheie și adăugați o altă rupere de linie atunci când l-am lovit controlați + introduceți, dar vom intercepta acest lucru și vom efectua magia noastră.
Nu suntem aici pentru a vorbi atât de mult despre HTML și CSS, deci iată șablonul? începem cu:
Introduceți textul
Avem nevoie de câteva elemente pentru a lucra aici, deci să le adăugăm:
Chiar simplific acest lucru aici: avem doar o textarea și a buton. Dacă ar fi fost adevărata afacere, am vrea un funcționar formă aici, care ar funcționa și vă va trimite mesajul fără JavaScript. De asemenea, includem jQuery și o etichetă de scriere goală, pe care vom profita de următorul.
Vom face acest lucru ca un plugin jQuery pe care îl vom apela ctrlEnter. Iată de ce începem:
$ .fn.ctrlEnter = funcția (btns, fn) var thiz = $ (aceasta); btns = $ (btns); ;
Luăm doi parametri. Vom numi această funcție de plugin pe textarea, așa că avem deja acel element. Primul parametru este un șir de unul sau mai mulți selectori care vor fi transmiși către jQuery. Acestea sunt elemente care trebuie să aibă aceeași funcționalitate atunci când se face clic. Al doilea parametru este funcția care va fi executată când controlați + introduceți este apăsat. Apoi, creăm variabile: jQueryified textarea și jQueryified btns.
funcția de performanță (e) fn.call (thiz, e);
Apoi, vom crea o funcție care înfășoară funcția în care am trecut. Facem acest lucru pentru a ne asigura că funcția este apelată cu textarea element as acest în cadrul funcției. De asemenea, transmitem obiectul evenimentului din eveniment.
Accentsconagua
thiz.bind ("keydown", funcția (e) if (e.keyCode === 13 && e.ctrlKey) performAction (e); e.preventDefault ();); btns.bind ("faceți clic pe", executați activitate); Apoi, avem instructorii actuali de evenimente. Primele cabluri funcționează în funcție de Tasta în jos eveniment pe textarea element. e.keyCode === 13 înseamnă că tasta Enter este apăsată. Dacă e.ctrlKey este adevărat, adică utilizatorul a apăsat tasta de control când a fost apăsată tasta Enter. Dacă tasta Enter și cheia de control sunt ambele apăsate, vom apela Efectuați o acțiune funcţie. Apoi, vom apela e.preventDefault, care va împiedica noua linie pe care cheia de introducere ar scrie în mod normal de la întâmplă.
Și acum, hai să facem operatorii de evenimente la butoane; vom lua pur și simplu textul, vom înlocui toate aparițiile lui \ n cu
$ ("# msg") ctrlEnter ("butonul", funcția () $ ("
");) prependTo (document.body); this.val (" ");); Acum, să o testați:
Vom face un sfat rapid pentru această zi. Aveți altă metodă de a face acest lucru? Apăsați comentariile!
