javascript - 颜色 :transparent on text in ie (highlight text in textarea using overlay technique)?

Question

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

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

这避免了将文字写在自身之上的难看的变暗。请注意，如果没有此规则(当我在 Chrome 的 dom 检查器中禁用它时)，facebook 的更新栏具有双文本效果:

到目前为止一切顺利，但我现在遇到的是 color:transparent 在 ie 中不受支持，因此存在难看的双文本效果。我查看了 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 将它们的不透明度强制为零, 并保留 <b> 的背景颜色元素。

当然，<span>元素需要 have layout使过滤器工作，并设置它们的 display属性(property)inline-block会弄乱空格，所以你需要通过设置他们的 white-space 来弥补这一点属性(property)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);
});