像 Facebook 一样在 textarea 中突出显示文本答案

【问题标题】：Highlight text inside textarea like Facebook does像 Facebook 一样在 textarea 中突出显示文本
【发布时间】：2011-12-08 22:06:58
【问题描述】：

当您在回复中键入@ 时，我会尝试实现类似于 Facebook 的效果。选择朋友后，该朋友的名字会以蓝色背景突出显示，因此您知道它是该文本中的一个单独实体。

我已经“检查元素”-ed 那个 textarea 并且没有放置在 textarea 顶部的 div。

谁能告诉我这是怎么做的？

【问题讨论】：

Facebook 将textarea 设为透明，并在下方添加div。尝试使用 Chrome 检查 textarea 元素并将其删除，然后尝试再次找到该元素。

标签： javascript html css facebook

【解决方案1】：

我使用 HTML5 对这个问题有完全不同的方法。我使用 div 和 contentEditable="true" 而不是 textarea（我一直在使用，直到遇到与您相同的问题）。

然后，如果我想更改指定部分的背景颜色，我只需用 span 包裹该文本即可。

我不是 100% 确定这是否是正确的方法，因为我是 HTML5 的新手，但它在我测试过的所有浏览器（Firefox 15.0.1、Chrome 22.0.1229.79 和 IE8）中都能正常工作。

希望对你有帮助

【讨论】：

有道理。但我（显然是 Facebook :P）更喜欢更通用的一个 :) 不过还是谢谢你 ;)
但是当您输入 div 时，它不会自动增加高度。因此，当您输入 text 时，它不会开始自动流动。然后需要 js 以某种方式增加它的大小......
内容可编辑属性已经支持了相当长一段时间，并且被大多数客户端颜色高亮引擎采用，这里有一个类似问题的例子stackoverflow.com/a/33588043/257319（更容易理解和使用CSS，没有内联样式）。

【解决方案2】：

见this example here。我只使用了 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;
}

【讨论】：

非常感谢您的回答和示例。

【解决方案3】：

textarea 有 background-color: transparent;您要查找的额外 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>

当然，这不会在您在 textarea 中键入时更新特殊的 div，您需要大量的 JavaScript。

【讨论】：

+1 非常感谢您的回答，但我选择了大卫的回答，因为它对我来说更直接。
你不应该这样做！绝对定位和使用 javascript 事件处理程序处理文本更新不是最佳实践，事实上，由于提供和维护跨浏览器工作解决方案所需的时间和精力 - 应该将这个答案呈现为简单-有害！
@EladKarako 我试图回答有关 Facebook 做了什么（或当时做了什么）的信息，这就是问题中提出的问题。我既不推荐这种方法，也不推荐任何替代方法，因为到目前为止我还没有任何理由来比较不同的方法。

【解决方案4】：

嗨，你可以检查这个类似于 facebook 的 jquery autosuggest 插件。我已经用它来实现你需要的相同功能 http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/

【讨论】：

谢谢！看起来真棒。实际上，我正在为 iPhone 寻找类似的东西，但更复杂。

【解决方案5】：

我建议将要分配背景内联的文本更改为display: inline-block; background-color: #YOURCOLOR;。这应该完全符合您的要求，而无需上述某些答案的所有复杂性。

最终你的 CSS 应该是这样的：

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

然后在 jQuery 中添加某种事件侦听器（不确定您如何识别它是一个名称）和条件放置：

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

【讨论】：

您没有回答我的问题（或者我相信）：如何将样式更改为 textarea 内的部分文本？
当前提供的答案不起作用。它根本不灵活。您必须使用 javascript 来收听。我不能给你一个事件监听器的例子，因为我不知道你到底在找什么。但是我在我的代码示例中所做的是将一个类添加到一个名称并给它一个背景颜色。只有在侦听名称时才能执行此操作。一旦确定了一个名称，只需将一个类添加到它的 DOM 元素中，它可以执行您希望它执行的操作。将 div 绝对定位在其后面是不可行的解决方案。
我知道如何使用 jQuery。您不能只将元素放在文本区域内，只能放置文本。
信不信由你，将 div 绝对定位在 textarea 后面正是 Facebook 所做的。 @Nicolae 是对的 - 你不能将元素放在文本区域中，所以这是唯一的方法之一。