javascript - 从 Textarea 中添加部分文本以某种方式着色/突出显示

Question

好吧，我想在 textarea 标签中突出显示部分文本，就像 facebook 在您的状态更新中链接某人时所做的那样。我怎么做？提前致谢。

Answer 1

facebook 做的是他们有一个 div 位于 textarea 下，它在 textarea 上的 keyup 上更新，这显然可以使用标签和 css 来改变文本的外观，他们将突出显示的单词包装在具有背景的 b 标签中: 淡蓝色；字体粗细:正常

所以你的标记看起来像这样

<div class="highlight">
    hi <b>Dave<b> how are you?
</div>

<textarea></textarea>

.hightlight { position:absolute }
.hightlight b { font-weight:normal; background:#FEFAE2 }

$('textarea').keyup(function(){
    // do stuff with detecting the mentions but essentially:
    $('.highlight').html($(this).val());
})