SeouliteLab

jQuery를 사용한 input 태그 placeholder 변경 예제 본문

프로그래밍

jQuery를 사용한 input 태그 placeholder 변경 예제

Seoulite Lab 2024. 3. 26. 14:15

소개:
이번 예제에서는 jQuery를 사용하여 HTML 문서 내의 input 태그의 placeholder를 변경하는 방법을 알아봅니다. 'ID 입력란'이라는 버튼을 클릭하면 해당 input 태그의 placeholder가 'ID작성'으로 변경되는 기능을 구현하여 jQuery의 기본 사용법을 익힐 수 있습니다.

input 태그 placeholder 변경:
jQuery를 사용하여 input 태그의 placeholder를 변경하기 위해서는 해당 input 태그의 id를 선택하여 선택자로 사용한 후, attr() 메서드를 사용하여 placeholder 속성을 변경합니다.

설정:
HTML 파일 내에서 jQuery 라이브러리를 로드해야 합니다. 일반적으로 CDN을 통해 라이브러리를 로드하거나 로컬에 포함시킬 수 있습니다.

예제: input 태그 placeholder 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input 태그 placeholder 변경 예제</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="text" id="inputField" placeholder="기존 placeholder">
    <button id="changePlaceholderBtn">ID 입력란</button>

    <script>
        $(document).ready(function(){
            $('#changePlaceholderBtn').click(function(){
                $('#inputField').attr('placeholder', 'ID작성');
            });
        });
    </script>
</body>
</html>

출력 결과:

<input type="text" id="inputField" placeholder="ID작성">

설명:
위의 예제에서는 jQuery를 사용하여 'ID 입력란' 버튼을 클릭하면 input 태그의 placeholder가 '기존 placeholder'에서 'ID작성'으로 변경됩니다. $(document).ready() 함수를 사용하여 문서가 로드되면 버튼의 클릭 이벤트를 처리하도록 설정합니다. 클릭 이벤트 핸들러에서는 선택한 input 태그의 placeholder를 attr() 메서드를 사용하여 변경합니다.

저작자표시 비영리 변경금지 (새창열림)

'프로그래밍' 카테고리의 다른 글

jQuery를 사용한 HTML 요소 동적 추가 - append 메서드  (0) 2024.03.26
jQuery를 사용한 input 태그 값 가져오기와 alert 창 표시 예제  (0) 2024.03.26
jQuery를 활용한 h태그 내용 변경 예제  (0) 2024.03.26
Java에서 디렉토리 크기 계산하는 방법  (0) 2024.03.26
Java에서 ArrayBlockingQueue를 활용한 스레드간 안전한 데이터 전달 방법  (0) 2024.03.26
'프로그래밍' Related Articles more