Я хочу создать текстовую область, которая выделяет текст за пределами символов (например, в твиттере).

Моя попытка здесь:http://jsfiddle.net/X7d8H/1/

HTML

    
    

Letters remaining: 140

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"));
});

Он использует JQuery

Работает кроме как на firefox. Чтобы увидеть ошибку, вставьте это в текстовое поле:

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

Который выставляет небольшую разницу в форматировании между div и textarea (только в firefox). Я'мы сделалискрытый» текст фиолетовый, чтобы вы могли видеть разницу слов

мы смотрели здесь:Как заставить Firefox отображать отступы textarea так же, как в div?

И здесь:Завершение текста таким же образом в div, как и в текстовой области

И здесь:Ошибка определения размера текстовой области в Firefox?

Но ни один из тех, кажется, не применяется ...

Я думал о том, чтобы попытаться сделать это contenteditable div, но получение событий изменения похоже на минное поле.

Кто-нибудь здесь сделал это успешно?