Mettre en surbrillance le texte à l'intérieur de textarea comme le fait Facebook
J'essaie de réaliser quelque chose comme le fait Facebook lorsque vous tapez @ dans une réponse. Après avoir choisi un ami, le nom de cet ami est mis en surbrillance avec un fond bleuté, de sorte que vous savez qu'il s'agit d'une entité distincte dans ce texte.
J'ai "inspect element" - ed cette zone de texte et il n'y a pas de div placé au-dessus de la zone de texte.
Quelqu'un peut-il me donner un indice sur la façon dont cela est fait ?
5 réponses
Voir cet exemple, ici. Je n'ai utilisé que CSS et HTML... Le JS est beaucoup plus complexe pour l'instant. Je ne sais pas exactement ce que vous attendez.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
J'ai une approche complètement différente de ce problème en utilisant HTML5. J'utilise un div avec contentEditable="true" au lieu d'un textarea (celui que j'utilisais jusqu'à ce que je suis coincé avec le même problème que vous aviez).
Ensuite, si je veux changer la couleur d'arrière-plan d'une partie spécifiée, je viens d'envelopper ce texte avec un span.
Je ne suis pas sûr à 100% Si c'est la bonne approche car je suis un débutant en HTML5 mais cela fonctionne bien dans tous les navigateurs que je l'ai testé (Firefox 15.0.1 , Chrome 22.0.1229.79 et IE8).
J'espère que ça aide
Le textarea a background-color: transparent; le div supplémentaire que vous recherchez est derrière, avec le même texte et la même police que le textarea, mais des couleurs différentes.
Un petit exemple pour illustrer le point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Bien sûr, cela ne met pas à jour le div spécial lorsque vous tapez dans la zone de texte, vous avez besoin de beaucoup de JavaScript pour cela.
Salut, Vous pouvez vérifier ce plugin jQuery autosuggest similaire à facebook .J'ai utilisé ceci pour atteindre la même fonctionnalité que vous avez requise http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
Je suggère de changer le texte que vous souhaitez attribuer un arrière-plan en ligne à display: inline-block; background-color: #YOURCOLOR;. Cela devrait faire exactement ce que vous souhaitez faire sans la complexité de certaines des réponses ci-dessus.
En fin de Compte, votre CSS devrait ressembler à ceci:
.name {display: inline-block; background-color: purple;}
Ensuite, ajoutez une sorte d'écouteur d'événement dans jQuery (vous ne savez pas comment vous identifiez que c'est un nom) et à l'intérieur de ce put conditionnel:
$(yourNameSelectorGoesHere).addClass(".name");