웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 contentEditable 엔터 입력시 div를 p 태그로 변경

Last Modified : 2020-11-19 / Created : 2020-11-18
5,416
View Count

자바스크립트의 태그에 contentEditable 어트리뷰트를 적용할 경우 해당 태그 내부에 텍스트 입력 또는 엘리먼트 추가 등등 다양한 조작이 가능합니다. 이때 만약 엘리먼트 안에서 엔터키를 입력할 경우 입력된 내용이 div 태그와 함께 추가되죠.




# 엔터 키 입력시 div를 p로 변경하기


즉 contentEditable이 사용된 엘리먼트 내부에서 엔터를 입력하면 자동으로 div 태그가 입력된 영역에 랩핑되어 적용됩니다. 실제 코드를 보면 아래와 같이 적용되죠.
<div>
  <br>
</div>
...

만약 기본값으로 사용되는 태그를 div가 아닌 p가 사용될 수 있을까요? 네~ 가능합니다. 가장 간단한 방법은 아래처럼 document.execCommand()를 사용하는 방법입니다.

document.execCommand()

이 명령어는 특히 클립보드 영역을 컨트롤 할 때 주로 사용되는데요 defaultParagraphSeparator의 값을 변경하여 p 태그로 설정이 가능합니다.
document.execCommand('defaultParagraphSeparator', false, 'p');

위의 코드를 웹페이지 로딩시 실행되도록 추가하면 됩니다. 예를들어 아래처럼 말이죠.
<head
  <script>document.execCommand('defaultParagraphSeparator', false, 'p');</script>
</head>

이제 요소 안에서 엔터를 입력하면 div가 p로 바뀌어 적용된 것을 확인할 수 있습니다.



! 팁 및 정보


이 방법 이 전에는 이벤트 방식으로 자주 구현되어 사용되었습니다. 즉 해당 엘리먼트에 키 이벤트를 추가한 후 엔터키를 입력할 때 마다 이벤트를 호출합니다. 그 다음 엔터키로 추가된 노드 정보를 getSelection()을 사용하여 불러온 후 div를 p 또는 br 등으로 바꾸는 방법이죠.

여기까지 contentEditable이 사용된 태그 영역에서 엔터키의 기본 태그 div를 p로 바꾸는 방법에 대하여 간략하게 알아보았습니다.

Previous

자바스크립트 커서 위치 및 선택 영역에 텍스트 및 엘리먼트 추가하기

Previous

[자바스크립트] 원하는 파일명으로 다운로드 받는 방법