SeouliteLab

jQuery를 사용한 텍스트 입력 필드 선택하기 본문

프로그래밍

jQuery를 사용한 텍스트 입력 필드 선택하기

Seoulite Lab 2024. 4. 15. 08:48

jQuery를 사용하면 웹 폼에서 텍스트 입력 필드를 쉽게 선택하고 조작할 수 있습니다. 텍스트 입력 필드는 사용자가 텍스트를 입력할 수 있는 입력란을 의미하며, jQuery를 사용하여 이러한 필드를 선택하고 다양한 작업을 수행할 수 있습니다. 아래 예제를 통해 jQuery를 사용하여 텍스트 입력 필드를 선택하는 방법을 살펴보겠습니다.

예제 1: 모든 폼 안의 텍스트 입력 필드 선택하기

$(document).ready(function() {
    var textFields = $("form input:text");
    textFields.css("border", "1px solid blue");
});

이 예제는 페이지에 있는 모든 폼 안의 텍스트 입력 필드를 선택하고, 해당 필드의 테두리를 파란색으로 변경합니다.

예제 2: 특정 폼 안의 텍스트 입력 필드에 포커스 주기

$(document).ready(function() {
    $("#contactForm input:text").focus();
});

이 예제는 id가 "contactForm"인 폼 안의 텍스트 입력 필드에 자동으로 포커스를 주어 사용자가 바로 입력할 수 있도록 합니다.

예제 3: 텍스트 입력 필드의 값을 초기화하기

$(document).ready(function() {
    $("form input:text").val("");
});

이 예제는 페이지에 있는 모든 텍스트 입력 필드의 값을 비워서 초기화합니다.