Share
Vous l'avez probablement déjà vu sur Twitter, Google+ ou Facebook. Vous avez une zone de texte dans laquelle vous écrivez votre statut / message, puis cliquez sur un bouton pour l'envoyer. Mais si vous êtes paresseux comme moi, vous n'aimez pas passer à la souris pour cliquer sur le bouton. Ces services nous aident en nous permettant d’appuyer sur contrôle + entrée soumettre. Recréons ce scénario pour nos propres projets.
Bien sûr, la raison pour laquelle nous ne pouvons pas soumettre juste entrer est parce que nous allons utiliser un zone de texte, afin que l'utilisateur puisse inclure des sauts de ligne. Normalement, le navigateur ignore simplement la contrôle clé et ajouter un autre saut de ligne lorsque nous avons frappé contrôle + entrée, mais nous allons intercepter cela et effectuer notre magie.
Nous ne sommes pas ici pour parler tellement de HTML et CSS, alors voici le? Template? nous commençons par:
Zone de texte Entrée
Nous avons besoin de quelques éléments pour travailler ici, alors ajoutons-les:
Je simplifie vraiment ceci ici: nous n'avons qu'un zone de texte et un bouton. Si c'était la vraie affaire, nous voudrions un fonctionnaire forme ici, cela fonctionnerait et envoyer votre message sans JavaScript. Nous incluons également jQuery et une balise de script vide dont nous allons tirer profit..
Nous allons en faire un plugin jQuery que nous appellerons ctrlEntrer. Voici ce que nous commençons avec:
$ .fn.ctrlEnter = fonction (btns, fn) var thiz = $ (this); btns = $ (btns); ;
Nous prenons deux paramètres. Nous appellerons cette fonction plugin sur le zone de texte, Nous avons donc déjà cet élément. Le premier paramètre est une chaîne d'un ou de plusieurs sélecteurs qui seront transmis à jQuery. Ce sont des éléments qui doivent avoir les mêmes fonctionnalités lorsque vous cliquez dessus. Le deuxième paramètre est la fonction qui sera exécutée lorsque contrôle + entrée est pressé. Ensuite, nous créons des variables: le jQueryified zone de texte et le jQueryified btns.
fonction performAction (e) fn.call (thiz, e);
Ensuite, nous créons une fonction qui englobe la fonction que nous avons transmise. Nous faisons cela pour nous assurer que la fonction est appelée avec zone de texte élément comme ce dans la fonction. Nous lui passons également l'objet événement de l'événement.
Accentsconagua
thiz.bind ("keydown", fonction (e) if (e.CodeCode === 13 && e.ctrlKey) performAction (e); e.preventDefault ();); btns.bind ("click", performAction); Ensuite, nous avons les gestionnaires d’événements réels. Le premier fil une fonction à la touche Bas événement sur le zone de texte élément. e.keyCode === 13 signifie que la touche Entrée est enfoncée. Si e.ctrlKey est vrai, cela signifie que l'utilisateur appuyait sur la touche de navigation lorsque la touche Entrée a été enfoncée. Si la touche entrée et la touche de contrôle sont toutes deux enfoncées, nous appellerons cela faire une action une fonction. Ensuite, nous appellerons e.preventDefault, ce qui empêchera la nouvelle ligne que la touche entrée écrit normalement de se produire.
Et maintenant, connectons les gestionnaires d’événements aux boutons; nous allons simplement prendre le texte, remplacer tous les occurrences de \ n avec
$ ("# msg"). ctrlEnter ("bouton", function () $ (""). append (this.val (). replace (/ \ n / g, "
")). prependTo (document.body); this.val (" ");); Maintenant, testons-le:
Nous en ferons un pourboire rapide pour la journée. Avoir une autre méthode pour faire cela? Hit les commentaires!
