입력란이 글자 수 제한을 초과하는 경우 span 태그 메시지 표시

Question

사용자가 입력 할 수있는 글자 수 제한이 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

Fiddle

아래이 작업을 수행합니다 : 그것은 내 관심을 불러 작동하지 않는 경우.

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