Comment mettre en surbrillance nom d'amis dans Facebook mise à jour de statut de zone (textarea)?
Dans Facebook le statut de mise à jour de la boîte, quand je tape @ et de commencer à taper et choisissez un nom, Steven Gerrard, à partir de la liste d'amis suggéré par fb, mon ami, le nom est mis en surbrillance dans la zone de texte comme ceci
J'ai vérifié avec Firebug et il n'y a qu'
- un div.surligneur qui contient sorte de formatage de texte (Steven Gerrard est à l'intérieur de balises b)
- un textarea dans une div.uiTypeahead. Rien d'intéressant que j'ai pu trouver
- et un caché d'entrée, qui contient le texte qui sera affiché: @[100001915747xxx:Steven Gerrard] est génial
Quel est le secret de truc derrière tout cela? Normal riches éditeurs de texte comme ckeditor ont généralement un iframe pour afficher le texte et un textarea pour garder le contenu original. Mais dans ce cas, je ne vois rien. S'il vous plaît jeter quelques lumières?
Je voudrais faire quelque chose comme ça, mais n'avez aucune idée de par où commencer. Aussi, si je voudrais afficher un petit pouce à côté de l'ami de mon nom, est-il possible?
OriginalL'auteur clu3 | 2011-09-21
Vous devez vous connecter pour publier un commentaire.
Voici comment cela fonctionne:
J'ai écrit un exemple rapide basé sur jquery, donc vous pouvez essayer vous-même, sans trop de code à analyser.
Voici un exemple de code, vous pouvez simplement copier-coller-enregistrer et essayer:
Cet exemple de code en évidence un ensemble défini de mot, le voici: "bonjour" et "monde".
Je vais vous permettent de vous adapter de la manière que vous voulez.
Laissez-moi savoir si vous avez la moindre question ou si vous avez besoin d'aide avec ce code.
Merci :)je ne sais pas quelle méthode vous utilisez pour redimensionner la zone de texte, mais le principe reste le même: chaque fois que vous redimensionnez la zone de texte, vous devez redimensionner la div derrière elle, exactement la même taille, de sorte que le texte reste alignée.
Le texte sur la div n'a pas de clip comme le texte dans le textarea. Des idées?
Pour info, @Julien L soigné code a été utilisé comme base pour un plugin jQuery qui prend en charge le redimensionnement, à la fois
<textarea>
et<input>
éléments, et plus encore. Si les plugins sont votre truc, regarde ça: github.com/mistic100/jQuery-highlightTextareaOriginalL'auteur Julien L
Après un examen de la façon de Facebook ce faire, je vois que le texte affiché sur l'écran est:
Que span est mis dans une table (avec beaucoup de conteneur div), qui est de style en conséquence.
Donc je pense que c'est le processus:
Lorsque vous tapez dans la boîte, Facebook dispose d'un textarea qui capture tout ce que vous tapez, mais l'utilisation de javascript pour afficher l'tapé du contenu HTML dans une table.
Lorsque vous soumettez, le contenu mis en forme dans un caché d'entrée (que vous avez déjà repérer dans la question) sont soumis. C'est comme "@[100001915747xxx:Steven Gerrard] est génial".
Lorsque le message formaté présenter, il est enregistré dans la base de données. Chaque fois que la page se charge, à partir du message enregistré le HTML est composé et retour.
Pour obtenir le même effet, vous pouvez utiliser n'importe quel jQuery plugin autocomplete.
Honnêtement, je ne pense pas à ce sujet jusqu'à ce que la lecture de votre question. J'ai fait quelques recherches, et de trouver la solution: mettre le textarea sur le dessus transparent. Vous pouvez vous référer à cette question: stackoverflow.com/questions/3282505/...
grâce tas. qui semble impressionnant. Je vais lui donner un aller et voir comment il se trouve
OriginalL'auteur Hoàng Long
Exemple de code utilisant la technique décrite par Julien: http://jsfiddle.net/SBBZm/
Mots qui commencent par une lettre majuscule sont mis en évidence dans l'exemple.
OriginalL'auteur nacho