JavaScript를 활용하면 입력 필드에 값이 입력되었는지 여부에 따라 버튼의 색상을 실시간으로 변경할 수 있습니다. 이번 글에서는 onkeyup 이벤트와 조건문을 활용하여, 텍스트 입력 상태에 따라 버튼의 배경색을 동적으로 바꾸는 방법을 단계별로 알아보겠습니다.
1. 기본 마크업 준비
먼저 다음과 같은 버튼이 있다고 가정해 보겠습니다.
<button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</button>
다음은 사용자가 텍스트를 입력할 입력 필드입니다. 이 필드에 값이 채워지면 위 버튼의 색상이 변경되도록 구현할 것이며, onkeyup 속성 덕분에 키 입력이 발생할 때마다 changeTheColorOfButtonDemo() 함수가 자동으로 호출됩니다.
<input type="text" id="changeColorDemo" style="margin-left:10px;margin-top:10px" onkeyup="changeTheColorOfButtonDemo()">
2. 전체 예제 코드
아래는 입력 필드의 값 유무에 따라 버튼 색상을 변경하는 완전한 예제 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
<label>
UserName:
</label>
<input type="text" id="changeColorDemo" style="margin-left:10px;margin-top:10px"
onkeyup="changeTheColorOfButtonDemo()">
<br><br>
<button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</button>
</body>
<script>
function changeTheColorOfButtonDemo() {
if (document.getElementById("changeColorDemo").value !== "") {
document.getElementById("buttonDemo").style.background = "green";
} else {
document.getElementById("buttonDemo").style.background = "skyblue";
}
}
</script>
</html>코드 핵심 로직 설명
- document.getElementById()를 사용해 입력 필드(changeColorDemo)와 버튼(buttonDemo) 요소에 접근합니다.
- 입력 필드의 value가 빈 문자열("")이 아니라면, 즉 값이 입력되어 있는 경우 버튼의 배경색을 green(초록색)으로 변경합니다.
- 입력 필드가 비어 있으면 버튼의 배경색을 다시 skyblue(하늘색)으로 되돌려 초기 상태를 유지합니다.
3. 실행 방법
위 프로그램을 실행하려면 파일 이름을 'anyName.html(index.html)'로 저장한 뒤, Visual Studio Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 됩니다. Live Server 확장 프로그램이 설치되어 있지 않다면 VS Code 확장 마켓플레이스에서 먼저 설치해 주세요.
4. 실행 결과
위 코드를 실행하면 브라우저에서 다음과 같은 화면을 확인할 수 있습니다.
텍스트 박스에 내용을 입력하는 순간, 아래 그림과 같이 버튼의 색상이 하늘색(skyblue)에서 초록색(green)으로 변경됩니다. 입력한 내용을 모두 지우면 다시 하늘색으로 돌아갑니다.
참고: 더 나은 접근 방식
인라인 onkeyup 속성 대신 addEventListener('input', ...) 방식을 사용하면 HTML과 JavaScript 코드를 분리할 수 있어 유지보수가 더욱 쉬워집니다. 또한 'input' 이벤트는 키 입력뿐만 아니라 붙여넣기 등 모든 입력 방식을 감지하므로, 실무에서는 더 안정적인 선택이 됩니다.