HTML onselect 이벤트 속성은 사용자가 HTML 문서 내 특정 요소의 텍스트를 마우스로 드래그하여 선택하는 순간 발생하는 이벤트입니다. 주로 <input>, <textarea>처럼 텍스트를 입력하거나 선택할 수 있는 요소에서 활용되며, 텍스트가 선택되었을 때 원하는 자바스크립트 코드를 실행할 수 있습니다.
문법(Syntax)
onselect 이벤트 속성의 기본적인 사용 문법은 다음과 같습니다.
<tagname onselect="script"></tagname>
예제(Example)
아래는 onselect 이벤트 속성을 활용한 실제 예제입니다. textarea 영역 안의 텍스트를 선택하면 페이지 배경 그라디언트와 입력창 배경색이 변경되도록 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
textarea {
border: 2px solid #fff;
background: transparent;
padding: 10px;
}
::placeholder {
color: #000;
}
</style>
</head>
<body>
<h1>HTML onselect Event Attribute Demo</h1>
<textarea onselect="selectFn()" rows="5" cols="50">Please select me because I'm dummy text.</textarea>
<script>
function selectFn() {
document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
document.querySelector("textarea").style.background = "#fff";
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 브라우저에서 실행한 초기 화면입니다. 이제 textarea 요소 안의 더미 텍스트를 마우스로 드래그하여 선택해 보세요.
텍스트를 선택하는 순간 onselect 이벤트가 발생하여, selectFn() 함수가 호출되고 페이지 배경이 파란 계열 그라디언트로, 입력창 배경은 흰색으로 변경되는 것을 확인할 수 있습니다.
정리
onselect 이벤트 속성은 텍스트 선택 동작에 반응하는 간단하지만 유용한 이벤트입니다. 복사 방지 알림, 선택된 텍스트 강조, 통계 수집 등 다양한 상황에서 활용할 수 있으며, 최신 개발 환경에서는 addEventListener('select', ...) 방식으로도 동일하게 구현할 수 있습니다.