Twitterの140文字制限のUIがよかったので、実装してみた。jQueryを使用。

Twitterの文字制限のあるテキストエリア

//テキストエリア
<textarea　id="text_area"></textarea>
//残りの文字数の表示
<p>残りの文字数 <span="count"></p>
//送信ボタン
<input type="submit" value="送信" id="submit">


<script>

  $(function(){

    //テキストエリアのDOMを取得
    var textArea = $("#text_area");
    //テキストの入力の文字数の変数
    var textAreaLength;
    //文字数のカウントのオブジェクト 
    var count = $("#count");
    //テキストエリアの最大文字数の定数
    var MAX_LENGTH = 140;
    //カウントに文字数をいれる。最大文字数の定数をいれる
    count.html(MAX_LENGTH);
    //送信ボタンのDOM
    var submit = $("#submit");
    
    //テキストエリアで文字を入力するごとにする処理
    textArea.bind("keydown keyup keypress change",function(){

      //テキストエリアの文字数を取得する。
      textAreaLength = $(this).val().replace(/\s|　/gm,'').length;
      //最大文字数との差額をだす。      
      var diff = MAX_LENGTH - textAreaLength;

      if ( diff >= 0) {
        //文字制限を超えてない場合
        //文字数を変化させる
        count.html("<span>"+ diff + "</span>");
        //送信ボタンを押せるようにする。
        submit.disabled= false;

      }else{
        //文字制限を超えた場合
        //文字数を変化させる。
        count.html("<span style='color: red'>-"+ diff + "<span>");
        //送信ボタンを押せないようにする。
        submit.disabled= true;

      }


    }





  }


</script>