[JQuery] Jquery(제이쿼리) 키보드 이벤트 처리, 글자수 제한

< 키보드 이벤트 >

 

- 해당 요소에 대해서 키보드를 이용한 이벤트를 주었을 때 줄 수 있는 여러 행동들이 있다.

- keyup() : 키보드에서 손을 뗐을 때 처리

- keypress() : 키보드를 계속 누르고 있을 때 처리

- keydown() : 키보드를 눌렀을 때 처리

 

 

① 키보드로 입력하는 글자수 계산하기

 

- textarea 폼에서 글자수를 200자로 제한하고 남은 글자를 계산해주는 코드

 

$(document).ready(function(){
  $('textarea').keyup(function(){
    $('h3').html("글자수 : "+(200-$(this).val().length));
				
    // 기존의 글자색 -> 빨간색으로 변경
    var value = 200 - $(this).val().length;
    if(value >= 0){ // 글자수가 200보다 적다
      $('h3').css('color','black');
    }else{ // 글자수가 200보다 크다
      $('h3').css('color','red');
    }
  });
});

<textarea rows="5" cols="70"></textarea>
 
<h3> 글자수 : 200 </h3>

 

 

  · 200자에서 남은 글자 수를 보여줌

 

  · 글자수가 200자 넘어가면 ( 남은 글자가 음수면 ) 글자색을 빨간색으로 바꿔줌

 

 

 

② 글자수가 초과하면 글자 자르기

 

- 제한된 글자수를 넘어가면 글을 더이상 쓰지 못하게 하는 방법

 

var desc = $(this).val().length;
if( desc > 200 ) { 
  alert("입력 메세지는 200자를 초과할 수 없습니다."); 
  $(this).prop('readonly', true);
}

var desc = $(this).val().length;
if( desc > 200 ) { 
  alert("입력 메세지는 200자를 초과할 수 없습니다."); 
  $(this).val($(this).val().substring(0, 200));
}

 

- 200자까지 글을 다 쓰면 읽기전용으로 바뀌어서 더 이상 글을 못쓰게 함

- 남은 글자수가 음수로 넘어가지 않고 200자까지 글을 잘라서 더 이상 글을 못쓰게 함