[jQuery] keyup 메소드를 사용하여 입력란에 문자 수 제한하기

26 Dec 2023

jQuery

jQuery는 HTML 문서 요소에 대한 이벤트 처리를 간편하게 관리할 수 있는 라이브러리로, 사용자 입력을 처리하고 제한하는 데 매우 유용합니다. 특히, keyup 메소드는 입력란에 텍스트를 입력할 때 발생하는 키보드 이벤트를 처리할 수 있어 문자 수 제한에 활용하기에 좋습니다.

1. HTML 파일 작성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>문자 수 제한 예제</title>
</head>
<body>
  <input type="text" id="inputField" maxlength="10">
  <p id="charCount">0 / 10</p>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

위의 예제는 입력란과 문자 수 표시를 위한 <p> 요소가 포함된 기본적인 HTML 파일입니다.

2. JavaScript 파일 작성

$(document).ready(function() {
  $('#inputField').keyup(function() {
    var textLength = $(this).val().length;
    $('#charCount').text(textLength + ' / 10');
    if (textLength > 10) {
      $(this).val($(this).val().substring(0, 10));
      $('#charCount').text('10 / 10');
    }
  });
});

위의 예제는 입력란의 keyup 이벤트를 사용하여 텍스트 길이를 확인하고, 길이가 10자를 초과할 경우 입력을 제한하는 JavaScript 파일입니다.

결론

위의 예제를 사용하면 jQuery의 keyup 메소드를 활용하여 입력란에 문자 수 제한을 간편하게 구현할 수 있습니다. 이는 사용자 경험을 개선하고 데이터의 일관성을 유지하는 데 도움이 될 것입니다.

참고 자료: jQuery 공식 문서