color:transparent on text in ie (highlight text in textarea using overlay technique)?

Question

I'm trying to replicate the functionality of facebook's status update where tags within the post are highlighted. E.g, you hit the '@' character, and autocomplete to a page you are a fan of, and then that tagged piece of the text is highlighted even as you continue to type.

After digging into the dom, it looks like they pull this off similar to the technique recommended by this previous answer: overlaying an absolutely positioned div atop a text area with the tag surrounded by <b> and css to highlight the <b> tags within the overlay. A crucial tweak they add is to use color:transparent on the overlay so that only the highlight shows up.

This avoids the ugly darkening of the text being written on top of itself. Notice that without this rule (when I disable it in the dom inspector in chrome), facebook's update bar has the double text effect:

So far so good, but what I'm running into now is that color:transparent isn't supported in ie, so the ugly double text effect is there. I looked at the status update box in ie8 and facebook seems to get around this, but the developer tools aren't powerful enough to inspect the dom and see what they are doing (css inspection seems to be broken for that page).

Here's what I have so far, looking good in chrome:

and bad with the double text in IE8:

Any ideas? And please, keep suggestions to the specific overlay technique, I know I could try to use some big honking iframe embedding rich text editor, but this is really a simple enhancement that is only going to apply to a couple lines of text at most.

Full code below.

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

To work around the lack of transparent color on IE, you can put the highlighted text and its surroundings inside additional <span> elements, force their opacity to zero using a filter, and keep the background color on the <b> element.

Of course, the <span> elements need to have layout for the filter to work, and setting their display property to inline-block will mess with whitespace, so you need to compensate for that by setting their white-space property to 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

For posterity I wanted to post the solution I've settled on, which is a little bit cleaner than Frédéric's but inspired by the key breakthrough he laid forth.

Improvements:

• only need to wrap the tokens in divs instead of all pieces of the text. this is done by having color:white for the text on the overlay that isn't highlighted instead of worrying about making it transparent.
• add nbsp& along with spaces to make up for the fact that whitespace:pre breaks in ie after html is added to the echoing overlay 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);