[JavaScript] 자바스크립트 텍스트 선택 이벤트 처리하기

117_자바스크립트 텍스트 선택 이벤트 처리하기

[적용]

• 텍스트 선택 시점에 작업을 처리하고 싶을 때
• 텍스트 선택 시점의 작업을 무효화하고 싶을 때

---

[문법]

이벤트	발생 타이밍
selectstart	텍스트 선택 시점

---

[내용]

selectstart 이벤트는 텍스트의 선택 시점에 발생한다.

 

HTML                                                                                                                                                              index.html

<p class="paragraph">안녕하세요.</p>

JavaScript                                                                                                                                                          main.js

document.querySelector('.paragraph').addEventListener('selectstart', () => {
	console.log('텍스트가 선택되었습니다.');
});

 

---

[예시]

선택한 문자열을 말풍선으로 표시하는 샘플을 확인해 보자.

• 1. selectstart 이벤트로 텍스트 선택 발생 확인
• 2. mouseup 이벤트(버튼을 떼는 시점)로 선택한 문자열을 말풍선에 표시
• 3. 말풍선 클릭 시 닫기

 

HTML                                                                                                                                                              index.html

<p class="paragraph">Hello, this is a JavaScript programing book.</p>
<div id="balloon"></div>

JavaScript                                                                                                                                                          main.js

// 말풍선 요소
const balloon = document.querySelector('#balloon');

// 대상 문자열 요소
const paragraph = document.querySelector('.paragraph');

// 선택 작업 시 처리
paragraph.addEventListener('selectstart', () => {
	// 클릭 해제 시 처리
    paragraph.addEventListener('mouseup', (event) => {
    	// 선택한 문자열 가져오기*
        const selectionCharacters = window.getSelection().toString();
        
        if (selectionCharacters.length > 0) {
        	// 한 글자 이상인 경우 문자를 표시
            balloon.innerHTML = selectionCharacters;
            balloon.classList.add('on');
            balloon.style.left = `${event.clientX - balloon.clientWidth / 2}px`;
            balloon.style.top = `${event.clientY - balloon.clientHeight * 2}px`;
        } else {
        	// 선택된 문자열이 없으면 말풍선 닫기
            removePopup();
        }
    },
    {
    	once: true
    });
});

// 말풍선 클릭 시 닫기
balloon.addEventListener('click', removePopup);

// 말풍선 닫기 처리
function removePopup() {
	balloon.classList.remove('on');
}

* window.getSelectio()은 선택 범위를 반환한다. toString()을 문장 끝에 추가하면 선택 중인 문자열을 반환한다.

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김