[DOM_Event] JS - select 이벤트 (onselect 속성) = 텍스트 선택 (= select이벤트 = 실렉트이벤트/셀렉트이벤트)

목차

1. select 예제 - 텍스트 선택
2. select 정의
3. select 구문
4. 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>

 

결과보기