颜色：在 ie 中的文本上透明（使用覆盖技术突出显示文本区域中的文本）？

Question

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

在深入研究 dom 之后，看起来他们完成了类似于 previous answer 推荐的技术：在文本区域顶部覆盖一个绝对定位的 div，标签由 <b> 和 css 包围以突出显示 @ 987654327@ 覆盖内的标签。他们添加的一个关键调整是在叠加层上使用 color:transparent 以便只显示高光。

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

到目前为止一切都很好，但我现在遇到的是 ie 不支持 color:transparent ，因此存在丑陋的双文本效果。我查看了 ie8 中的状态更新框，facebook 似乎解决了这个问题，但是开发人员工具的功能不足以检查 dom 并查看它们在做什么（该页面的 css 检查似乎被破坏了）。

这是我目前所拥有的，在 chrome 中看起来不错：

在 IE8 中的双文本很糟糕：

有什么想法吗？请保留对特定覆盖技术的建议，我知道我可以尝试使用一些大型的 iframe 嵌入富文本编辑器，但这确实是一个简单的增强功能，最多只能应用于几行文本。

完整代码如下。

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 上缺少透明颜色的问题，您可以将突出显示的文本及其周围区域放在额外的 <span> 元素中，使用 filter 将其不透明度强制为零，并在 @987654326 上保留背景颜色@元素。

当然，<span> 元素需要have layout 才能使过滤器工作，并且将它们的display 属性设置为inline-block 会混淆空格，因此您需要通过设置它们的@987654324 来弥补这一点@属性到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);