在文本区域内突出显示文本，就像Facebook一样

Question

在文本区域内突出显示文本，就像Facebook一样

javascripthtmlcssfacebook

27

我试图实现类似Facebook在回复中输入@<NAME_OF_A_FRIEND>所做的操作。选择了一个朋友之后，该朋友的名称会用蓝色背景突出显示，因此您知道它是文本中的单独实体。

我已经使用“检查元素”来检查了这个文本区域，发现没有div置于文本区域之上。

有人能给我一些关于如何实现这个效果的提示吗？

输入图片说明

- Nicu Surdu

5

Facebook 使 textarea 元素变为透明，并在其下方放置一个 div。请使用 Chrome 检查 textarea 元素并将其删除，然后再次查找该元素。 - David Rodrigues

5个回答

18

请查看此示例。我只使用了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;
}

- David Rodrigues

8

以下是一个简短的例子以说明此点：

<!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来完成这个任务。

- user743382

非常感谢您的回答并给予了 +1，但我选择了 David 的答案，因为对我来说更加直接明了。 - Nicu Surdu

你永远不应该这样做！使用绝对定位以及使用JavaScript事件处理程序来处理文本更新并非最佳实践。事实上，由于需要提供和维护跨浏览器工作解决方案所需的时间和精力，应将其视为纯有害的做法！ - user257319

@EladKarako 我试图回答有关Facebook在当时所做的事情 - 这正是问题所问的。我既不推荐这种方法，也不推荐任何替代方案，因为我迄今没有比较不同方法的理由。 - user743382

3

你好，你可以查看这个类似Facebook的jQuery自动建议插件。我已经使用它来实现你所需的相同功能。 http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/

- Sohail Anwar

谢谢！看起来很棒。实际上，我正在寻找类似于iPhone的东西，但更加复杂。 - Nicu Surdu

-5

我建议将要分配背景的文本更改为display: inline-block; background-color: #YOURCOLOR;。这样做可以完全实现您想要的效果，而不需要上面某些答案中的所有复杂性。

最终，您的CSS应该类似于以下内容：

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

然后在jQuery中添加某种事件监听器（不确定您是如何标识它是名称），并在该条件语句内放置：

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

- Jesse Atkinson

1

你没有回答我的问题（至少我是这么认为的）：如何在文本区域中更改部分文字的样式？ - Nicu Surdu

当前提供的答案不起作用。它一点也不灵活。你必须使用JavaScript来监听。我无法给你一个事件监听器的例子，因为我对你具体要求的内容了解得不够多。但是在我的代码示例中，我正在给一个名称添加一个类，并给它设置背景颜色。只有当你监听到一个名称时才能这样做。一旦识别出一个名称，只需向其DOM元素添加一个类，以实现你想要的效果。将一个div绝对定位在其后面并不是可行的解决方案。 - Jesse Atkinson

1

我知道如何使用jQuery。你不能仅仅把元素放在文本区域内，只能放置文本。 - Nicu Surdu

信不信由你，绝对定位 div 在文本区域后面正是 Facebook 所做的。@Nicolae 是对的 - 你不能把元素放在文本区域内部，所以这是为数不多的方法之一。 - ndbroadbent

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- José L. · Accepted Answer

我对这个问题有完全不同的解决方法，使用HTML5。我使用一个带有contentEditable="true"属性的div代替