在特定点突出显示文本字段中的文本

Question

我正在尝试复制 Twitter 的“撰写新推文”框。我有一个计数器，显示你还剩下多少个字母。我没有使用 HTML 的 maxlength，所以当你进入底片时，计数器变成红色并且是负数。在 Twitter 中，溢出的文本会以浅红色突出显示。

如何在文本字段中突出显示溢出的文本？这是我已经拥有的 HTML 和 JavaScript 。 （我之前试图突出显示文本，但我不知道从哪里开始，因为我是菜鸟。:P）：

        <div id="char_count">
            <span id="charsLeftH" title="Characters Remaining" style="cursor: pointer">500</span>
        </div>
        <input type="button" value="Send" id="submit">
        <script>
            var chars = 500;

            function charsLeft() {
                chars = 500 - $("#type_area").val().length;
                document.getElementById("charsLeftH").innerHTML=chars;
                if (chars < 50 && chars > 0) {
                    document.getElementById("charsLeftH").style.color="#9A9A00";
                    document.getElementById("submitX").id="submit";
                } else if (chars < 1) {
                    document.getElementById("charsLeftH").style.color="#BD2031";
                    if (chars < 0) {document.getElementById("submit").id="submitX";}
                } else {
                    document.getElementById("charsLeftH").style.color="#000000";
                    document.getElementById("submitX").id="submit";
                }
            };

            charsLeft();
        </script>

Answer 1

这是脚本 jfiddle:

style:
    <style type="text/css">
    .red{
        color:#F00;
        }
    #mytextarea{
        background-color:#999;
        filter:alpha(opacity=50);
        opacity:0.5; 
        border: 1px #3399FF solid;
        min-height:50px;
        width:150px;
        word-wrap:break-word;
        }
    </style>

html:

<div contenteditable="true" id="mytextarea" onChange="charsLeft(this.innerHTML)" onKeyUp="charsLeft(this.innerHTML)"></div> <div id="remaining"></div>

javascript：

<script>
    var before = 1;
var chars = 10;
var len = 0;
var div = document.getElementById('mytextarea');
var el = document.getElementById('remaining');
el.innerHTML = chars;
var overchars = 92; //length of the tags
function charsLeft(val) {
    if (typeof (val) != 'undefined') {
        val = val.replace('<font style="background-color:#F36;" id="reddragonred">', '');
        val = val.replace('</font>', "");
        len = val.length;
        if (len > chars) {
            plusvalor = val.slice(chars, len);
            redstr = '<font style="background-color:#F36;" id="reddragonred">' + plusvalor + '</font>';
            blackstr = val.slice(0, chars);
            div.innerHTML = blackstr + redstr;
            var subj = document.getElementById('reddragonred');
            var cursorepos = subj.innerHTML.length;
            var range = document.createRange();
            var sel = window.getSelection();
            console.log(before+' '+len);
            if((before>0)&&(before<len)){
                console.log('no');
                try{
                    console.log(cursorepos);
                    if(cursorepos==0){
                        range.setStart(subj, 0);
                    }else{
                        range.setStart(subj, 1);
                    }
                }catch (e){
                    console.log(e);
                }
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
                div.focus();
            }
            before=len;
        }
    }
    el.innerHTML = chars - len;
}

</script>