Выделите текст в текстовом поле в определенной точке

Question

Я пытаюсь воспроизвести блок Twitter «Создать новый твит». У меня есть счетчик, который показывает, сколько писем у вас осталось. Я не использую HTML maxlength, поэтому, когда вы идете в негативы, счетчик становится красным и отрицательным. В Твиттере ваш переполненный текст подсвечивается светло-красным.

Как бы я мог выделить переполненный текст в текстовом поле? Вот мой 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>