jQuery Girl
  1. jQuery Girl
  3. Implémentation de hashtags à l’aide de Jquery
Intereting Posts
Préserver la position du curseur avec angularjs La boîte de dialog de l’interface utilisateur de jQuery ne ferme pas la boîte de dialog Filtre rapide sur grid luisante question multiple setinterval avec jquery Evénement jQuery .toggle obsolète, quoi utiliser? Passer une chaîne de variable comme clé dans un littéral d’object javascript Grow div du coin en haut à droite? Pouvez-vous avoir une validation javascript personnalisée côté client pour les validateurs de formulaire Web ASP.NET standard? Javascript manipulant JSON Fonctionnalités JQuery Drag and Drop avec ASP.NET Highcharts – comment append des informations supplémentaires au graphique Impossible d’append une valeur concaténée à un customId dans un bloc div Lorsque j’utilise ajax pour rendre la partie Scroller, iScroll ne fonctionne pas. Les objects récemment ajoutés ne répondent pas aux événements jQuery après le chargement de la page ASP.net MVC 3 jQuery Validation; Désactiver OnKeyUp Unobtrusive?

Implémentation de hashtags à l’aide de Jquery

Ce que je veux faire, en gros, c’est que chaque fois que j’écris quelque chose qui commence par #, la couleur de la chaîne étiquetée doit changer immédiatement, par exemple en bleu. Et lorsque j’appuie sur espace pour terminer la chaîne, la couleur doit redevenir noire. J’ai essayé une logique comme celle-ci sur un div contenteditable: 

if (# is pressed) hashtagging = true append "" to div if (space is pressed and hashtagging is true) hashtagging = false append "" to div

Cela ne fonctionne pas comme prévu.

Quelque chose comme ça devrait faire: 

 $(function() { var hashtags = false; $(document).on('keydown', '#myInputField', function (e) { arrow = { hashtag: 51, space: 32 }; var input_field = $(this); switch (e.which) { case arrow.hashtag: input_field.val(input_field.val() + ""); hashtags = true; break; case arrow.space: if(hashtags) { input_field.val(input_field.val() + ""); hashtags = false; } break; } }); });

Désormais, ce code vérifie si le hashtag ou l’espace est enfoncé et ajoute une étendue avec une classe pour le style. La raison pour laquelle il faut rechercher keydown au lieu de keyup est d’append les balises avant que l’entrée réelle ne soit ajoutée au champ de texte. J’ai utilisé un champ de texte comme entrée, mais modifiez-le avec tout ce dont vous avez besoin.

Voici un exemple de travail, fait en incorporant la solution donnée par Sondre à la solution de Mr_Green ( Définir la position du curseur toujours pour qu’elle se termine par contenteditable ) pour placer le curseur à la fin.

http://jsfiddle.net/344m4/1/ 

 var hashTagList = []; function logHashList(){ hashTagList = []; $('.highlight').each(function(){ hashTagList.push(this.innerHTML); }); for(var i=0;i<hashTagList.length;i++){ alert(hashTagList[i]); } if(hashTagList.length==0){ alert('You have not typed any hashtags'); } } $(function() { var hashtags = false; $(document).on('keydown', '#example-one', function (e) { arrow = { hashtag: 51, space: 32 }; var input_field = $(this); switch (e.which) { case arrow.hashtag: e.preventDefault(); input_field.html(input_field.html() + "#"); placeCaretAtEnd(this); hashtags = true; break; case arrow.space: if(hashtags) { e.preventDefault(); input_field.html(input_field.html() + " "); placeCaretAtEnd(this); hashtags = false; } break; } }); }); function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } }