如果输入框超出字符限制，则显示 span 标记消息

Question

我有一个标题输入框，用户输入的字符数限制为 3 个。在用户达到 3 个字符的限制并且无法再输入后，我希望列出 span 消息下面以红色显示，"Headline must be under 3 characters."

通过 CoffeeScript 函数，我试图添加一个 class on change 应该以红色显示下面的 span 消息；但是它不起作用。我已经为这个问题提供了 Fiddle。此外，我还显示了我希望我的功能显示的图像。如果有人可以提供帮助，我将不胜感激！

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

如果输入框超出字符限制，则显示 span 标记消息

If input box goes over character limit, have span tag message display

html

css

message

input

coffeescript