Выделите текст внутри textarea, как Facebook

Я пытаюсь добиться чего-то вроде Facebook, когда вы набираете @<NAME_OF_A_FRIEND > в ответ. После того, как вы выберете друга, имя этого друга будет выделено синим фоном, поэтому вы знаете, что это отдельный объект в этом тексте.

Я "проверяю элемент" - это текстовое поле, и в верхней части текстового поля нет div.

Может ли кто-нибудь дать мне понять, как это делается?

enter image description here

Ответы

Ответ 1

Смотрите этот пример здесь. Я использовал только CSS и HTML... JS сейчас намного сложнее. Я точно не знаю, что вы ожидаете.

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;
}

Ответ 2

У меня совершенно другой подход к этой проблеме с использованием HTML5. Я использую div с contentEditable="true" вместо текстового поля (которое я использовал до тех пор, пока не застрял с той же проблемой, что и у вас).

Затем, если я хочу изменить цвет фона для указанной части, я просто обертываю этот текст пробелом.

Я не уверен на 100%, если это правильный подход, поскольку я новичок в HTML5, но он отлично работает во всех браузерах, которые я тестировал (Firefox 15.0.1, Chrome 22.0.1229.79 и IE8).

Надеюсь, что это поможет

Ответ 3

Текстовое поле имеет фоновый цвет: прозрачный; дополнительный div, который вы ищете, находится за ним, с тем же текстом и шрифтом, что и в textarea, но с разными цветами.

Краткий пример, иллюстрирующий точку:

<!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>

Конечно, это не обновляет специальный div при вводе в текстовое поле, для этого вам нужно много JavaScript.

Ответ 5

Я бы предложил изменить текст, который вы хотите присвоить фону, в строке display: inline-block; background-color: #YOURCOLOR;. Это должно делать именно то, что вы хотите, чтобы оно выполнялось без всех сложностей некоторых из приведенных выше ответов.

В конечном итоге ваш CSS должен выглядеть примерно так:

.name {display: inline-block; background-color: purple;}

Затем добавьте какой-то прослушиватель событий в jQuery (не уверен, как вы определяете, что это имя), и внутри этого условного put:

$(yourNameSelectorGoesHere).addClass(".name");