[javascript] jQuery를 사용한 입력 필드 제어하기

01 Dec 2023

jQuery는 JavaScript의 라이브러리로, 웹페이지의 동적인 요소를 쉽게 조작할 수 있게 도와줍니다. 이번 블로그 포스트에서는 jQuery를 사용하여 입력 필드를 제어하는 방법에 대해 알아보겠습니다.

1. 입력 필드 선택하기

jQuery를 사용하여 입력 필드를 제어하려면 먼저 입력 필드를 선택해야 합니다. 일반적으로 입력 필드는 <input> 요소나 <textarea> 요소로 구성됩니다.

var inputField = $("input[name='myInput']");

위의 예제에서는 name 속성이 “myInput”인 입력 필드를 선택하여 변수 inputField에 저장했습니다. 이제 inputField 변수를 사용하여 입력 필드를 제어할 수 있습니다.

선택한 입력 필드의 값을 가져오려면 jQuery의 val() 메서드를 사용하면 됩니다.

var value = inputField.val();

위의 예제에서는 inputField 변수에 저장된 입력 필드의 값을 가져와 value 변수에 저장했습니다.

선택한 입력 필드에 값을 설정하려면 jQuery의 val() 메서드를 사용하여 값을 할당하면 됩니다.

inputField.val("new value");

위의 예제에서는 inputField 변수에 저장된 입력 필드의 값을 “new value”로 설정했습니다.

jQuery를 사용하여 입력 필드의 이벤트를 처리할 수도 있습니다. on() 메서드를 사용하여 이벤트 핸들러를 등록하면 됩니다.

inputField.on("change", function() {
    // 입력 필드의 값이 변경되었을 때 실행할 코드
});

위의 예제에서는 inputField 변수에 저장된 입력 필드의 값이 변경되었을 때, 해당 이벤트 핸들러를 실행하는 코드를 작성했습니다.

이상으로 jQuery를 사용하여 입력 필드를 제어하는 방법에 대해 알아보았습니다. jQuery를 사용하면 간결하고 효율적인 방법으로 입력 필드를 제어할 수 있으므로, 웹 개발에서 유용하게 사용할 수 있습니다.