Eu quero criar uma área de texto que destaca o texto além de um limite de caracteres (como o do twitter).

Minha tentativa está aqui:http://jsfiddle.net/X7d8H/1/

HTML

<div class="wrapper">
    <div class="highlighter" id="overflowText"></div>
    <textarea id="textarea1" maxlength="200"></textarea>
</div>
<div id="counter">Letters remaining: 140</div>
<input type="Button" value="Done" id="doneButton"></input>

CSS

* {
    font-family: sans-serif;
    font-size: 10pt;
    font-weight: normal;
}
.wrapper {
    position: relative;
    width: 400px;
    height: 100px;
}
.wrapper > * {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    resize: none;
    white-space: pre-wrap;          /* CSS3 */   
    white-space: -moz-pre-wrap;     /* Firefox */    
    white-space: -pre-wrap;         /* Opera below 7 */   
    white-space: -o-pre-wrap;       /* Opera 7 */    
    word-wrap: break-word;          /* IE */
}
.highlighter {
    background-color: #eee;
    color: #f0f;
}
.highlight {
    background-color: #fd8;
    color: #f0f;
}
textarea {
    background-color: transparent;
    color:#000;
}

JAVASCRIPT

function limitTextSize(e) {
    var max = 140
    var txt = $("#textarea1").val();
    var left = txt.substring(0, max);
    var right = txt.substring(max);
    var html = left + '<span class="highlight">' + right + "</span>";
    $("#overflowText").html(html);
    $("#counter").html("Letters remaining: " + (max - txt.length));
    $("#doneButton").attr("disabled", txt.length > max);
}

function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}
$(document).ready(function() {
    $("#textarea1").bind('input propertychange', limitTextSize)
    maxLength($("#textarea1"));
});

Ele usa o JQuery

Funciona, exceto no firefox. Para ver o erro, cole isso na textarea:

fjdf hkj hfj hdfkjsd sf hfllll sdlflldsf lsdlf flsdlf lsdf lsdf llsdfls dlfs ldflsd f

Que expõe a pequena diferença na formatação entre div e textarea (somente no firefox). Eu fiz o texto "oculto" ficar roxo para que você possa ver a diferença de quebra de linha.

Eu olhei aqui:Como forçar o Firefox a processar textarea padding da mesma forma que em um div?

E aqui:Envolvendo o texto da mesma maneira em um div como em uma textarea

E aqui:Firefox textarea tamanho bug?

Mas nenhum desses parece se aplicar ...

Pensei em tentar torná-lo um div contenciável, mas obter os eventos de mudança parece um campo minado.

Alguém aqui fez isso com sucesso?