jQuery는 웹 개발에서 많이 사용되는 JavaScript 라이브러리로, 다양한 기능을 수행하는 데 도움을 줍니다. 이번 포스트에서는 jQuery의 keyup 이벤트를 활용하여 입력란에 숫자만 입력할 수 있도록 하는 방법을 살펴보겠습니다.

1. HTML 입력란 생성

우선 HTML 파일에서 숫자만 입력할 수 있는 입력란을 생성합니다.

<input type="text" id="numericInput" placeholder="Enter only numbers">

2. jQuery를 사용하여 숫자만 입력

다음으로, jQuery를 사용하여 입력란에 숫자만 입력하도록 설정합니다. 아래와 같이 keyup 이벤트에 대한 핸들러를 추가하여 입력된 값이 숫자가 아니면 제거하는 기능을 구현할 수 있습니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $('#numericInput').on('keyup', function(){
        $(this).val($(this).val().replace(/[^0-9]/g, ''));
    });
});
</script>

위의 코드에서 정규표현식 /[^0-9]/g은 입력된 값 중에서 숫자가 아닌 모든 문자를 찾아 제거합니다. 따라서 사용자가 입력한 값 중에서 숫자만 남도록 처리됩니다.

이제 웹 페이지를 열고 입력란에 문자를 입력해보면, 숫자 이외의 입력은 모두 제거되는 것을 확인할 수 있을 것입니다.

위와 같이 jQuery의 keyup 이벤트를 활용하여 숫자만 입력하도록 설정할 수 있습니다. 이를 통해 사용자가 간편하게 원하는 형식으로 입력하도록 도와줄 수 있습니다.