[jQuery] keyup 메소드를 사용하여 입력 값에 따라 특정 문구 강조하기
jQuery는 브라우저에서 HTML 문서를 조작하고 상호작용하기 위한 자바스크립트 라이브러리입니다. jQuery를 사용하여 keyup 이벤트를 처리하여 입력 값에 따라 특정 문구를 강조하는 방법을 소개하겠습니다.
HTML 구조
먼저 HTML에서 입력 필드와 강조할 문구를 정의합니다.
<input id="inputField" type="text" />
<p id="highlightText">입력값을 여기에 표시</p>
jQuery를 사용한 keyup 이벤트 처리
다음은 jQuery를 사용하여 keyup 이벤트를 처리하여 입력 값에 따라 특정 문구를 강조하는 방법입니다.
$(document).ready(function(){
$('#inputField').keyup(function(){
let inputValue = $(this).val();
$('#highlightText').text(inputValue);
});
});
위 코드에서는 inputField의 keyup 이벤트를 감지하여 해당 입력 필드의 값(inputValue)을 가져온 후, 이 값을 highlightText에 표시합니다.
이제 페이지를 열고 입력 필드에 값을 입력할 때마다 highlightText가 갱신되는 것을 확인할 수 있습니다.
이것으로 jQuery를 사용하여 keyup 이벤트를 처리하여 입력 값에 따라 특정 문구를 강조하는 방법을 알아보았습니다.