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

Posted 2023-05-07

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

【英文标题】：color:transparent on text in ie (highlight text in textarea using overlay technique)?

【发布时间】：2011-05-06 00:31:11

【问题描述】：

我正在尝试复制 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);
);

【参考方案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);
);

【讨论】：

感谢您的回答，但是使用过滤器会使整个跨度——包括背景颜色——透明，因此没有高亮效果。诀窍似乎在于使 only 文本透明，同时保留背景颜色。

@Karl，奇怪，background 属性适用于您的<b> 元素，因此它仍应通过透明的<span> 显示...如果您添加background-color: transparent; 会更好吗？到overlayText 班级？

hmm，回到你原来的建议，你提到将突出显示的部分放在一个跨度中并将其不透明度设置为 0，但总的来说，我们希望叠加层的文本颜色的不透明度为 0，并且只有 <b> 元素有背景颜色。

我终于放弃了猜测，启动了一个虚拟机并让覆盖层工作，至少在 IE8 下。请参阅我编辑的答案。

弗雷德里克，非常感谢您的帮助！我认为内联块是拼图中缺失的部分。

【参考方案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);