INPUT 엘러먼트 제어하기

웹 애플리케이션의 프론트엔드 화면을 개발하다보면 가장 빈번하게 사용하는 것이 사용자로부터 검색조건이나 등록할 정보를 입력받는 input 엘러먼트이다. 가장 많이 사용되는 text 타입과 select 엘러먼트를 예로 들어 간단한 input 엘러먼트 제어 방법을 정리하였다.

HTML 선언하기

<!-- 활성화된 TextBox를 선언한다. -->
<input id="someText" type="text" placeholder="someText">

<!-- 비활성화된 TextBox를 선언하려면 disabled 애트리뷰트를 부여한다. -->
<input id="someText" type="text" placeholder="someText" disabled>

<!-- ComboBox도 비활성화가 가능하다. -->
<select id="someSelect" disabled>
  <option value="KOR">Korea</option>
  <option value="CHN">China</option>
  <option value="JPN">Japan</option>
</select>

JavaScript에서 제어하기

jQuery에서는 아래와 같이 input 엘러먼트에 대한 제어가 가능하다.

// TextBox를 비활성화한다. INPUT 엘러먼트로 선언할 수 있는 모든 타입의 컨트롤이 가능하다.
$('#someText').prop('disabled', true);

// TextBox를 활성화한다.
$('#someText').prop('disabled', false);

// TextBox의 현재 입력 값을 획득한다. 역시 INPUT 엘러먼트로 선언할 수 있는 모든 타입의 컨트롤이 가능하다.
var someText = $('#someText').val();

// TextBox의 입력 값을 임의로 부여한다.
$('#someText').val('someValue');

// ComboBox의 입력 값을 임의로 부여한다. OPTION 엘러먼트에 존재하지 않는 값을 부여할 경우 값이 초기화된다.
$('#someSelect').val('CHN');

// TextBox의 입력 값을 초기화한다.
$('#someText').val('');