Question

我正在尝试复制Facebook状态更新的功能，其中帖子中的标签会突出显示。例如，您点击'@'字符，并自动完成您喜欢的页面，然后即使您继续输入，该标记的文本也会突出显示。

在深入研究dom后，看起来他们将此类型与此previous answer推荐的技术类似：在文本区域顶部覆盖绝对定位的div，其中标记由和css包围突出显示叠加层中的标记。他们添加的一个重要调整是使用颜色：覆盖层上的透明，以便只显示高亮显示。

alt text

这可以避免文本在其自身上面的丑陋变暗。请注意，如果没有此规则（当我在chrome中的dom检查器中禁用它时），facebook的更新栏会产生双重文本效果：

alt text

到目前为止一直很好，但我现在遇到的是那种颜色：ie不支持透明，所以丑陋的双重文字效果就在那里。我查看了ie8中的状态更新框，facebook似乎解决了这个问题，但开发人员工具的功能还不足以检查dom，看看他们在做什么（css检查似乎已经打破了该页面）。

这是我到目前为止所看到的，在chrome中看起来很好：

alt text

和IE8中的双重文字不好：

alt text

有什么想法吗？请保持对特定叠加技术的建议，我知道我可以尝试使用一些大的鸣喇叭嵌入富文本编辑器，但这实际上是一个简单的增强，最多只适用于几行文本。 / p>

以下完整代码。

HTML：

        <div class="textarea textareaBorder">
            <textarea id="myTextarea" class="textarea realTextarea"></textarea>
            <div id="myOtherTextarea" class="textarea overlayTextarea"></div>
        </div>

的CSS：

.textarea {
    font-family:monospace;
    font-size: 12px;
    border: 0;
    width: 100%;
    height: 200px;
}

.realTextarea {
    margin: 0;
    background: transparent;
    position: absolute;
    z-index: 999;
}

.overlayTextarea {
    margin: 0;
    position: absolute;
    color:transparent;
    top: 1px;
    left: 1px;
    z-index: 998;
}

.overlayTextarea b {
    background:#add8e6;
}

.textareaBorder {
    border: groove 1px #ccc;
    position: relative;
    width: 702px;
    height: 202px;
}

的javascript：

$("textarea.realTextarea").keyup(function(e) {
    var textval = $(e.target).val();
    var markedup = textval.replace(/(the magic word)/g, "<b>$1</b>")

    $("#myOtherTextarea").html(markedup);
});

Answer 1

要解决IE上缺少透明色的问题，您可以将突出显示的文本及其周围环境放在其他元素中，使用filter将其不透明度强制为零，并保持背景色在元素上。

当然，元素需要have layout才能使过滤器正常工作，将display属性设置为inline-block会占用空白，因此您需要通过将white-space属性设置为pre来补偿这一点。

<强> CSS：

.overlayTextarea b {
    background: #add8e6;
}

.overlayTextarea span {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    display: inline-block;
    white-space: pre;
}

<强>使用Javascript：

$("textarea.realTextarea").keyup(function(e) {
    var textval = $(e.target).val();
    var markedup = textval.replace(/(.*)(the magic word)(.*)/g,
        "<span>$1</span><b><span>$2</span></b><span>$3</span>");
    $("#myOtherTextarea").html(markedup);
});

Answer 2

对于子孙后代，我想发布我已经解决的解决方案，这比Frédéric的解决方案更清晰，但受到他所提出的关键突破的启发。

改进：

只需要在div中包装标记而不是文本的所有部分。这是通过让color:white覆盖未突出显示的文本而不是担心使其透明来完成的。
添加nbsp&以及空格以弥补whitespace:pre中断的事实，即将html添加到回显叠加div后

的CSS：

.annotated, .highlight, .inputtext, .inputtext textarea, .highlight .echoer {
    width:100%;
    height:30px;
}

.annotated {
    position:relative;
    border:1px solid black;
    height:40px;
}

.annotated .wrap {
    padding: 5px;
}

.annotated .highlight, .annotated .inputtext {
    position: absolute;
}

.annotated textarea {
    z-index:999;
    border:none;
    padding:0;
    margin:0;
    font-size:13px;
    white-space: pre-wrap;
    font-family: verdanna, arial, helvetica, sans-serif;
    background: transparent;
    overflow:hidden;
}

.annotated .echoer {
    z-index:998;
    border: none;
    padding:0;
    margin:0;
    font-size:13px;
    white-space: pre-wrap;
    font-family: verdanna, arial, helvetica, sans-serif;
    color:white;
}

.annotated .echoer b span {
    display:inline-block;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    color:transparent;
}

.annotated .echoer b{
    z-index:998;
    font-weight:normal;
    display:inline-block;
    background: #90ee90;
}

HTML：

        <div class="annotated">
            <div class="highlight">
                <div class="wrap">
                    <div class="echoer">

                    </div>
                </div>
            </div>

            <div class="inputtext">
                <div class="wrap">
                    <textarea>

                    </textarea>
                </div>
            </div>
        </div>

的javascript：

$(".annotated textarea").keyup(function(e) {
    var textval = $(e.target).val();
    var markedup = textval.replace(/(the magic word)/g, "<b><span>$1</span></b>");

    // make up for the fact that ie loses the whitespace:pre after setting html
    markedup = markedup.replace(/ {2}/g, '&nbsp; ');
    $(".annotated .echoer").html(markedup);

颜色：ie中的文本透明（使用叠加技术突出显示textarea中的文本）？

2 个答案: