如果输入框超过字符限制，则显示跨度标签消息

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;
}