突出顯示特定點的文本字段中的文本

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>