入力ボックスが文字制限を超えた場合、スパンタグメッセージ表示を表示する

Question

ユーザーが入力できる3文字の制限がある見出し入力ボックスがあります。ユーザーが3文字の制限に達した後、次のスパンメッセージを赤色で表示するには、「見出しは3文字以下でなければなりません」と入力してください。

CoffeeScript関数を使用して、下のスパンメッセージを赤色で表示する必要がある変更時にクラスを追加しようとしています。しかし、それは動作していません。私はこの問題のためにフィドルを提供しました。さらに、私は私の機能を表示したいもののイメージを表示しました。もし誰かが私が本当に感謝することができます！

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