Highlight Text in Text Field at a Specific Point

Question

I'm trying to replicate Twitter's "compose new tweet" box. I have a counter that shows how many letters you have left. I'm not using HTML's maxlength, so when you go into the negatives, the counter turns red and is negative. In Twitter, your overflowed text is highlighted a light red.

How would I manage to highlight overflowed text in a text field? Here's my HTML and JavaScript that I already have. (I've attempted to highlight the text before but I didn't know where to start 'cuz I'm a noob. :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>

I've answered a similar question here: http://stackoverflow.com/questions/28820293/how-does-twitter-implement-its-tweet-box/41837682#41837682 — Hussard, Jan 24 '17 at 19:48

Alessandro Gabrielli · Answer 1 · 2013-06-03T15:08:50.527

here is the script 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>

Thanks! I'll check it out when I can. Also, in the jfiddle, as I type and go into the red, my typing is moved to the beginning of the highlight. I'll see what I can do though ;) — TJ Mazeika, Jun 03 '13 at 10:34
@Buonicrm It's hard to find a good code to play with the cursor in a contenteditable element. this is the assignement: range.setStart(div, 1); from 0,1 and 2 i found that 1 was the less worst. I lost much time yesterday, i'll write if some solution comes. — Alessandro Gabrielli, Jun 03 '13 at 10:44
@Bionicrm I updated something, works only for the first char. I can't figure how it can throw that exception considering how the data are taken: http://jsfiddle.net/XCdCy/6/ — Alessandro Gabrielli, Jun 03 '13 at 14:35
@Bionicrm now it put the cursor at the end, code updated in the answer and here:http://jsfiddle.net/XCdCy/8/ — Alessandro Gabrielli, Jun 03 '13 at 15:06

Highlight Text in Text Field at a Specific Point

1 Answers1