如果输入框超过字符限制，请显示范围标记消息

Question

我有一个标题输入框，其中包含3个字符的限制供用户输入。在用户达到3个字符的限制并且无法再键入后，我希望下面列出的span消息显示为红色，“标题必须小于3个字符。”

通过CoffeeScript函数，我试图添加一个关于更改的类，它应该以红色显示下面的span消息;但它不起作用。我为这个问题提供了一个小提琴。另外，我已经显示了我想要显示的功能的图像。如果有人可以提供帮助，我会非常感激！

Fiddle

<label htmlFor="request[title]">Headline</label>
        <input name="request[title]" id="headline_input" onChange= "headline_input_max" maxLength="3" type="text"
               placeholder="Give your request a title"
               required />
        <span id="title_over_limit_text">Headline must be under 3 characters.</span>

 $ ->
  $('#headline_input').change ->
    if $(this).val().length > 3
        $('#title_over_limit_text').addClass('title_over_limit_text_display')


#title_over_limit_text {
  display: none;
}

.title_over_limit_text_display {
  color: red;
}

Answer 1

请执行以下操作：如果不起作用请致电我的注意。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 <input name="requesttitle" id="headline_input" onkeyup="seee()" type="text" placeholder="Give your request a title" required />
        <span id="title_over_limit_text" style="display:none;">Headline must be under 3 characters.</span>

       <script>
        function seee(){
   var textval = $("#headline_input").val().length;
  //  alert (textval); to see count of the text number
    if (textval > 3){
      $("#title_over_limit_text").show();
      //if maybe you want to run ajax request here you can do that.
      return false;
     } else {
     $("#title_over_limit_text").hide();
     return false;
   }
   }
       </script> 

#title_over_limit_text {
  display: none;
}

.title_over_limit_text_display {
  color: red;
}