text 선택자
선택자 :text는
타입 text를 가진 입력 필드를 선택합니다.
input 태그를 참조하세요.
:text는 CSS 사양에 속하지 않으므로,
최신 브라우저에서 성능 향상을 위해 대신
[type='text']를 사용하는 것이 좋습니다.
문법
타입 text를 가진 입력 필드를 다음과 같이 선택합니다:
$(':text');
다른 의사 클래스 선택자들과 마찬가지로
(':'로 시작하는), ':' 앞에 태그 이름이나
다른 선택자를 지정하는 것이 좋으며,
그렇지 않으면 '*' 선택자가 적용되어,
$(':text')는
$('*:text')로 인식되므로,
대신 $('input:text')를 사용하는 것이 좋습니다.
:text는
type 속성이 지정되지 않은
모든 입력 필드도 선택한다는 점을 기억해야 합니다.
다음 예제에서 동작 차이를 확인할 수 있습니다:
$('<input>').is('[type=text]'); // false 반환
$('<input>').is(':text'); // true 반환
예제
타입 text를 가진 모든 입력 필드를 선택하고
css 메서드를 사용하여
초록색 배경과 빨간색 테두리를 적용해 봅시다:
<form>
<input type="button" value="button">
<input type="file">
<input type="checkbox">
<button>button</button>
<input type="reset">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="checkbox">
<input type="text">
</form>
$('form input:text').css({background: 'green', border: '2px red solid'});
$('form').submit(function(event) {
event.preventDefault(); // 폼 제출 방지
});
