ContentEditable에서 커서(Caret) 활용하기(1) - 자바스크립트

1. ContentEditable이란?

<div contenteditable='true'></div>
<p contenteditable='true'></p>
<span contenteditable='true'></span>
...

특정 요소(Element)에 텍스트를 작성할 수 있도록하는 속성

아래와 같이 생성할 수 있다.

 

2. ContentEditable에서의 커서(Caret)

ContentEditable에서 텍스트를 작성할 때 내가 작성하는 부분에 커서가 있는 것을 확인할 수 있다.
오늘은 커서의 정보를 확인하는 방법에 대해 알아보자.

* 일반적으로 커서는 마우스 커서를 지칭하고, 텍스트 창에 있는 커서는 캐럿(Caret)이라고 지칭한다.

 

3. 커서의 정보 Selection

const selection = window.getSelection()
/*Selection{
	anchorNode: node,
	anchorOffset: number,
	baseNode: node,
	baseOffset: number,
	extentNode: node,
	extentOffset: number,
	focusNode: node,
	focusOffset: number,
	isCollapsed: boolean,
	rangeCount: number,
	type: string
}*/

위와 같이 selection의 정보를 가져올 수 있다.

이때 anchor와 base는 커서의 시작 정보를, extent와 focus는 커서의 끝 정보를 가지고 있다.

isCollapsed는 시작 커서와 끝 커서의 위치의 동일 여부를 판단해준다.

 

예시를 통해 조금 더 자세히 보자.

아래와 같이 contenteditable에 내용이 작성되어있다고 가정하자.

<div contenteditable='true'>
	<span>가나다</span><span>라마바사</span><span>아자차</span>
<div>

이 때 "가나다라마바사아자차"라고 화면에서 보이고, 이 중 "다라마바사아"를 드래그하면 아래와 같은 결과가 나온다.

CaretPos.js selection에 간단한 예제를 올려두었다.

 

4. 커서의 정보 Range

const selection = window.getSelection();
const range = selection.getRangeAt(0);
/*Range{
	collapsed: boolean,
	commonAncestorContainer: node,
	endContainer: node,
	endOffset: number,
	startContainer: node
	startOffset: number
}*/

위와 같이 range의 정보를 가져올 수 있다.

이때 start는 커서의 시작 정보를, end는 커서의 끝 정보를 가지고 있다.

collapsed는 시작 커서와 끝 커서의 위치의 동일 여부를 판단해준다.

commonAncestor는 커서의 시작과 끝을 포함한 상위 정보를 가지고 있다.

collapsed는 시작 커서와 끝 커서의 위치의 동일 여부를 판단해준다.

 

예시를 통해 조금 더 자세히 보자.

아래와 같이 contenteditable에 내용이 작성되어있다고 가정하자.

<div contenteditable='true'>
	<span>가나다</span><span>라마바사</span><span>아자차</span>
<div>

이 때 "가나다라마바사아자차"라고 화면에서 보이고, 이 중 "다라마바사아"를 드래그하면 아래와 같은 결과가 나온다.

CaretPos.js range에 간단한 예제를 올려두었다.

 

5. 커서의 절대 위치 정보 DOMRect

const selection = window.getSelection();
const range = selection.getRangeAt(0);
const boundingClientRect = range.getBoundingClientRect();
/*DOMRect{
	bottom: number,
	height: number,
	left: number,
	right: number,
	top: number,
	width: number,
	x: number,
	y: number
}*/
const clientRects = range.getClientRects();
/*DOMRectList{
	index: DOMRect,
	length: number
}*/

위와 같이 DOMRect의 정보를 가져올 수 있다.

 

contenteditable에 아래와 같이 글이 작성되있다고 했을 때, getBoundingClientRect와 getClientRects가 어떤 데이터를 가지고 있는지 확인해보자.

getBoundingClientRect함수의 경우 아래와 같이 드래그된 전체의 영역에 대해 데이터가 나오게된다.

이와 달리 getClientRects함수는 드래그된 각 영영들의 DOMRect가 List로 반환되어 모든 영역에 대한 정보들을 각각 알 수 있다. 

 

이번에는 커서(Caret)의 정보를 확인하는 방법을 알아보았으니, 다음번에는 커서(Caret)을 설정하고, 위치를 표시하는 방법을 알아보자.