onblur 속성으로 포커스 이탈 시점에 스크립트 실행하기
HTML에서 요소가 포커스(focus)를 잃는 순간 특정 스크립트를 실행하고 싶다면 onblur 속성을 사용하면 됩니다. onblur는 입력 필드에서 커서가 빠져나갈 때 값을 검증하거나 변환하는 등의 작업에 자주 활용되는 이벤트 속성입니다.
예를 들어, 사용자가 텍스트 입력란에 내용을 입력한 뒤 다른 곳을 클릭해 포커스가 벗어나는 순간, 입력된 값을 자동으로 대문자로 변환하는 동작을 구현할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<p>아래에 텍스트를 입력해 보세요!</p>
Country: <input type = "text" name = "myid" id = "myid" onblur = "display()">
<script>
function display() {
var str = document.getElementById("myid");
str.value = str.value.toUpperCase();
}
</script>
</body>
</html>코드 설명
위 예제의 동작 방식은 다음과 같습니다.
1. onblur = "display()" – 입력 필드(<input>)에 onblur 속성을 지정하여, 해당 요소가 포커스를 잃는 순간 display() 함수가 호출되도록 합니다.
2. display() 함수 – document.getElementById("myid")로 입력 요소를 가져온 뒤, toUpperCase() 메서드를 사용해 입력된 값을 모두 대문자로 변환합니다.
3. 결과적으로 사용자가 입력을 마치고 입력란 밖을 클릭하면, 입력했던 텍스트가 자동으로 대문자로 바뀌게 됩니다.
onblur 활용 팁
onblur는 단순한 값 변환 외에도 다양하게 활용할 수 있습니다.
- 입력값 유효성 검사: 사용자가 필드를 떠나는 시점에 이메일 형식, 필수 입력 여부 등을 확인하여 즉시 피드백을 제공할 수 있습니다.
- 자동 서식 적용: 전화번호, 날짜 등 입력 형식을 자동으로 정리하는 데 유용합니다.
- 폼 UX 개선: 포커스가 벗어날 때 안내 문구를 표시하거나 다음 필드로 부드럽게 안내할 수 있습니다.
이처럼 onblur 속성은 폼 처리와 사용자 경험 개선에 꼭 필요한 기본 이벤트 속성이므로, 상황에 맞게 적극적으로 활용해 보시기 바랍니다.