Color: transparent in text, i.e. (select text in textarea using the overlay method)?

Question

I am trying to replicate facebook status update functionality when tags are highlighted in a post. For example, you click the “@” symbol and autocomplete the page on which you are a fan, and then the marked part of the text is highlighted even when you continue to print.

After digging into dom, it looks like they pull it out just like the technique recommended by this previous answer : overlaying an absolutely positioned div on top of the text area with the tag surrounded <b>and css to highlight the tags <b>in the overlay. The key setting they add is the use of color: transparent on the overlay, so that only the highlight appears.

This avoids the ugly darkening of text written on top. Note that without this rule (when I turn it off in the dom inspector in chrome), the facebook update panel has a double text effect:

So far, so good, but now I am faced with the fact that color: transparent is not supported in ie, so there is an ugly double text effect. I looked at the status update window in ie8 and it looks like facebook went around this, but the developer tools are not powerful enough to inspect the house and see what they are doing (css check seems violated for this page).

Here is what I still look good in chrome:

and bad with double text in 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>, , <b>.

, <span> 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

, , , , , .

:

• 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);