140文字を越えるとハイライト風 ref: http://qiita.com/ituki_b/items/1d49e1f218b1d358aac8

file0.html

<div id="realText">
    <p class="textarea"></p>
    <textarea name=""></textarea>
    <p class="count">0文字</p>
</div>

file1.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #dfd;
  font: 14px sans-serif;
}

#realText {
    position: relative;
    padding: 0 10px;
    word-wrap: break-word;
}

.textarea {
    position: absolute;
    top: 0;
    left: 10px;
    color: transparent;
    height: 100px;
    width: 300px;
}

.red {
    background-color: rgba(255,0,0,.5);
}

.count {
    text-align: right;
}

textarea {
    width: 300px;
    min-height: 100px;
    font: 14px sans-serif;
}

file2.js

$(function(){
    function heightlighter() {
        $('#realText textarea').bind(' blur keydown keyup keypress change',function(){
            var textWrite = $('#realText textarea').val().trim(),
            textarea = $('#realText p.textarea'),
            inputLimit = 140;
            $(textarea).text('');
            $('p.count').text(textWrite.length+"文字");
            for (var i=0; i<textWrite.length; i++) {
                if(i >10) {
                    textarea.append('<span class="red">'+textWrite.substr(i, 1)+'</span>'); 
                } else {
                    textarea.append('<span>'+textWrite.substr(i, 1)+'</span>'); 
                }           
            }
        });

        $('#realText p.textarea').click(function(){
            $('#realText textarea').select();
        });
    }
    heightlighter();
});