Question

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

Answer 1

facebook做了什么，他们有一个div位于textarea下面，从textarea更新keyup，显然可以使用标签和css来改变文本的外观，他们将突出显示的单词包装在具有背景的b标签中： lightbluecolor ;字体重量：正常

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

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

Answer 2

你需要Javascript的帮助才能做到这一点。我认为，对于这个Q＆amp; A网站来说，解决方案有点过于复杂，我建议使用谷歌搜索教程，例如：http://www.developphp.com/view.php?tid=1192。您还可以查看一些很好的示例：http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

Answer 3

使用此jquery插件http://plugins.jquery.com/project/htmlArea

来自网站

使用这个非常基本的插件，您可以在textarea中允许任何HTML    - 完整的jQuery UI主题支持。

就像$（“TEXTAREA”）一样简单.htmlArea（）;

你可以设置很多选项，文字颜色，位置，   显示格式选项等。

$（ “TEXTAREA”）htmlArea（{颜色： '＃FF00FF'，对齐： '右'}）;

Answer 4

如果jQuery在你的堆栈中，这个插件应该可以帮到你：

https://github.com/mistic100/jQuery-highlightTextarea

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

4 个答案: