jQueryで指定した文字数以上になったらそれ以降のテキストを赤くする

Question

テキストエリアが３文字以上になったとき、３文字目以降を赤くしたいです。

<p><input type="text" id="target"></p>

こちらですと最後の赤くする行でエラーになってしまうのですが、どうしたらいいでしょうか？

$(document).on("input","#target", function(){	

  var input = $(this).val();
  var input_length = input.length;
  var max_length = 2;	

  if( input_length <= max_length ){
    $(this).css('color','blue');
  }

　// ３文字以上になったとき、３文字目以降を赤くしたい
  else{
    var over_length = max_length-input_length; 
    $(this).val().slice(-2).css('color','red'); // エラー
  }

});

Answer 1

input要素の中はHTMLタグでの装飾ができません。

Comments

[ninjanin]

ありがとうございます。