jQuery에서 입력 값 설정

jQuery의 val() 메서드를 사용하면 입력 필드의 값을 설정하거나 현재 값을 읽고, 기존 값에서 새 값을 만들 수 있습니다. 대상 입력 필드를 선택한 다음 .val("new value")를 호출해 값을 업데이트하세요. 아래 예제에서는 setter와 콜백 형식, getter, 그리고 흔한 실수를 피하는 데 도움이 되는 점검 사항을 살펴봅니다.

.val()로 입력 값 설정하기

jQuery 선택 항목에 .val(value)를 호출하면 일치하는 모든 요소에 해당 값이 설정됩니다. 예를 들어 $("#email").val("reader@example.com")은 ID가 email인 입력 필드의 값을 설정합니다. 선택자와 문자열은 페이지에서 사용하는 값으로 바꾸세요. $(".email")과 같은 클래스 선택자는 여러 입력 필드와 일치할 수 있으므로, 일치하는 필드 모두를 설정하려는 경우에만 사용하세요.

호출이 실행될 때 요소가 존재해야 합니다. $(function () { ... })와 같은 ready 핸들러 안에서 호출하거나, 관련 폼의 마크업 뒤에 스크립트를 배치하세요. 선택자와 일치하는 요소가 없으면 업데이트할 대상이 없습니다. 값이 바뀌지 않는 것처럼 보이면 선택자와 요소의 ID 또는 클래스를 확인하세요.

콜백으로 입력 값 업데이트하기

새 값이 각 입력 필드의 현재 값에 따라 달라진다면 .val()에 함수를 전달하세요. jQuery는 일치하는 각 요소에 대해 함수를 호출하고, 0부터 시작하는 위치와 현재 값을 인자로 전달합니다. 설정할 값을 반환해야 합니다. 이 인자들은 콜백에 전달되는 입력값이지, 자동으로 반환되는 값이 아닙니다. 콜백을 사용하면 여러 필드를 각각 읽고 설정하는 별도 단계 없이 변환할 수 있습니다.

예를 들어, 아래 콜백 로직은 현재 값의 대문자 변환 결과를 반환합니다. 이는 변환 방식을 보여 주는 독립 실행형 JavaScript 예제입니다. 실제 페이지에서는 선택한 입력 필드에 .val()를 호출하면서 콜백을 전달하세요.

이 섹션의 코드와 표시되는 레이블 또는 출력은 영어로 유지됩니다.

function uppercaseValue(index, currentValue) {
  return currentValue.toUpperCase();
}

const updatedValue = uppercaseValue(0, "delft");

흔히 사용하는 포커스 해제 시 대문자 변환 동작을 구현하려면 blur 핸들러를 연결하고 그 안에서 $(this).val(function (index, currentValue) { return currentValue.toUpperCase(); })를 사용하세요. 사용자가 필드에서 벗어나면 콜백이 반환한 문자열이 해당 필드의 값을 대체합니다. 필요하지 않다면 index 매개변수는 생략할 수 있습니다.

.val()로 입력 값 읽기

인자 없이 .val()를 호출하면 선택 항목 중 첫 번째 요소의 값을 읽습니다. 예를 들어 const email = $("#email").val();는 현재 값을 저장하므로 코드에서 확인하거나 다른 곳에 사용할 수 있습니다. 선택자가 여러 요소와 일치해도 getter는 첫 번째 요소의 값만 읽습니다. 모든 요소의 값이 필요하면 요소별로 처리하세요.

입력 필드에서 읽은 값은 문자열입니다. 이후 로직에서 숫자가 필요하면 명시적으로 변환하고, 사용자가 실제로 입력한 텍스트를 고려하세요. getter는 페이지를 불러온 뒤 달라졌을 수 있는 현재 필드 값을 가져옵니다.

입력 값을 설정할 때 흔히 확인할 사항

• 선택자 확인: ID, 클래스 또는 다른 선택자가 대상 입력 필드와 일치하는지 확인하세요. 여러 필드와 일치하는 선택자는 그 필드 모두를 업데이트합니다.
• 실행 시점 확인: 예를 들어 jQuery ready 핸들러 안이나 폼 마크업 뒤에서 입력 필드가 생성된 후 setter를 실행하세요.
• 값의 출처 확인: 콜백을 사용한다면 변환된 문자열을 반환해야 합니다. 콜백은 요소 인덱스와 현재 값 순서로 인자를 받습니다.
• 이벤트는 별도로 처리: .val()로 값을 설정해도 change 이벤트가 자동으로 발생하지 않습니다. 프로그램에서 값을 업데이트한 뒤 다른 코드가 반응해야 한다면, 값 설정 후 .trigger("change")와 같이 필요한 이벤트를 명시적으로 발생시키세요.
• 화면 표시와 폼 제출 구분: .val()는 컨트롤의 현재 값을 바꾸지만, 페이지의 다른 텍스트를 업데이트하거나 폼 제출에 해당 필드가 포함되도록 보장하지는 않습니다. 제출 동작이 중요하다면 입력 필드가 비활성화되지 않았는지, 해당 폼에 속해 있는지 확인하세요.