목차
- select 예제 - 텍스트 선택
- select 정의
- select 구문
- select 예제 - 텍스트 내용 선택 시, 얼럿 띄우기
select 예제 - 텍스트 선택
<input type="text" value="홈짱닷컴 Homzzang.com" onselect="homzzang()">
<script>
function homzzang() {
alert("텍스트 중 일부/전체 선택");
}
</script>
결과보기
select 정의
요소의 텍스트 (전체/일부)가 선택될 때 이벤트 발생.
(주로, <input type="text">, <textarea> 태그에서 사용.)
1.
- 이벤트확산: X
- 취소가능성: X
- 이벤트타입: UiEvent (사용자인터페이스에서 생성 시) / event (그외경우)
- 지원HTML: <input type="file">, <input type="password">, <input type="text">, <textarea>
- DOM 버전: 2레벨
2.
모든 브라우저 지원
3. MDN 매뉴얼
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event
select 구문
HTML 방식
<element onselect="myScript">
JS 방식 (2가지)
object.onselect = function(){myScript};
object.addEventListener("select", myScript);
select 예제 - 텍스트 내용 선택 시, 얼럿 띄우기
<input type="text" id="hz" value="홈짱닷컴 Homzzang.com" onselect="textAlert()">
<button type="button" onclick="textSelect()">텍스트일부선택</button>
<script>
function textSelect() {
document.getElementById("hz").select();
}
function textAlert() {
alert("텍스트 (전체/일부) 선택 완료");
}
</script>
결과보기