Share
Probabilmente lo hai visto su Twitter, Google+ o Facebook. Hai una casella di testo, dove scrivi il tuo stato / messaggio e poi fai clic su un pulsante per inviarlo. Ma se sei pigro come me, non ti piace passare al mouse per fare clic sul pulsante. Questi servizi ci aiutano permettendoci di premere controllo + invio presentare. Ricregiamo questo scenario per i nostri progetti.
Certo, la ragione per cui non possiamo presentare solo accedere è perché useremo un textarea, in modo che l'utente possa includere interruzioni di riga. Normalmente, il browser ignorerà semplicemente il controllo chiave e aggiungi un'altra interruzione di linea quando colpiamo controllo + invio, ma intercettiamo questo ed eseguiamo la nostra magia.
Non siamo qui per parlare di HTML e CSS così tanto, quindi ecco il modello? iniziamo con:
Casella di testo Invio
Abbiamo bisogno di qualche elemento con cui lavorare qui, quindi aggiungiamoli:
Sto semplificando davvero questo qui: abbiamo solo un textarea e a pulsante. Se questo fosse il vero affare, vorremmo un funzionario modulo qui, funzionerebbe e invierà il tuo messaggio senza JavaScript. Includiamo anche jQuery e un tag script vuoto di cui trarremo vantaggio in seguito.
Lo faremo come plugin jQuery che chiameremo ctrlEnter. Ecco cosa iniziamo con:
$ .fn.ctrlEnter = function (btns, fn) var thiz = $ (this); btns = $ (btns); ;
Stiamo prendendo due parametri. Chiameremo questa funzione plugin sul textarea, quindi abbiamo già quell'elemento Il primo parametro è una stringa di uno o più selettori che verranno passati a jQuery. Questi sono elementi che devono avere la stessa funzionalità quando cliccati. Il secondo parametro è la funzione che verrà eseguita quando controllo + invio è premuto. Quindi, stiamo creando variabili: il jQueryified textarea e il jQueryified Btns.
function performAction (e) fn.call (thiz, e);
Successivamente, creiamo una funzione che avvolge la funzione che abbiamo inoltrato. Facciamo in modo che possiamo assicurarci che la funzione venga chiamata con il textarea elemento come Questo all'interno della funzione. Lo passiamo anche all'oggetto evento dall'evento.
Accentsconagua
thiz.bind ("keydown", function (e) if (e.keyCode === 13 && e.ctrlKey) performAction (e); e.preventDefault ();); btns.bind ("click", performAction); Successivamente, abbiamo gli effettivi gestori di eventi. I primi fili una funzione per il keydown evento sul textarea elemento. e.keyCode === 13 significa che il tasto Invio è stato premuto. Se e.ctrlKey è vero, ciò significa che l'utente stava premendo il tasto di controllo quando è stato premuto il tasto Invio. Se si premono entrambi il tasto Invio e il tasto di controllo, lo chiameremo performAction funzione. Quindi, chiameremo e.preventDefault, che impedirà la newline che normalmente la chiave di invio potrebbe scrivere.
E ora, leghiamo i gestori degli eventi ai pulsanti; prendiamo semplicemente il testo, sostituiamo tutte le occorrenze di \ n con
$ ("# msg"). ctrlEnter ("button", function () $ (""). append (this.val (). replace (/ \ n / g, "
")). prependTo (document.body); this.val (" ");); Ora proviamolo:
Questo è il tuo consiglio per la giornata. Hai un altro metodo per farlo? Colpisci i commenti!
