JavaScript를 활용하면 한 입력 필드에 입력된 값을 다른 필드에 그대로 자동으로 채워 넣을 수 있습니다. 예를 들어 배송지 주소와 수령지 주소가 동일한 경우, 버튼 클릭 한 번으로 두 번째 필드를 첫 번째 필드의 값과 똑같이 맞출 수 있어 사용자 편의성이 크게 향상됩니다.
핵심 원리
이 기능은 querySelector로 요소를 선택하고, addEventListener로 클릭 이벤트를 감지한 뒤, 첫 번째 입력 필드의 value 속성 값을 두 번째 필드에 대입하는 방식으로 구현합니다.
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input {
padding: 5px;
margin: 5px;
display: block;
}
button {
padding: 3px;
}
</style>
</head>
<body>
<h1>Autofill a filled textbox same as another</h1>
<input type="text" class="addr" placeholder="address" />
<button class="Btn">Same as above</button>
<input type="text" class="addr" placeholder="address" />
<script>
let BtnEle = document.querySelector(".Btn");
let addrEle = document.querySelectorAll(".addr");
BtnEle.addEventListener("click", () => {
addrEle[1].value = addrEle[0].value;
});
</script>
</body>
</html>코드 설명
document.querySelector(".Btn")은 'Same as above' 버튼 요소를 가져오고, document.querySelectorAll(".addr")은 클래스명이 addr인 두 개의 입력 필드를 모두 선택합니다. 버튼을 클릭하면 이벤트 리스너가 실행되어 addrEle[1].value = addrEle[0].value 코드를 통해 첫 번째 필드의 값이 두 번째 필드에 그대로 복사됩니다.
실행 결과
첫 번째 텍스트 상자에 주소를 입력하면 다음과 같이 화면에 표시됩니다.
이후 'Same as above(위와 동일)' 버튼을 클릭하면 두 번째 입력 필드에도 동일한 주소가 자동으로 채워집니다.
마무리
이처럼 간단한 몇 줄의 JavaScript만으로 반복 입력을 줄이고 폼 작성 경험을 개선할 수 있습니다. 실무에서는 배송지·수령지 주소 일치, 연락처 복사 등 다양한 상황에서 유용하게 활용할 수 있습니다.