[JavaScript]div 태그에서 텍스트 입력하는 방법

div 태그에서 텍스트 입력하는 방법

이번 포스팅은 input, textarea 태그를 사용하지 않고 div 태그에서 텍스트를 입력할 수 있는 방법을 소개합니다.

---

contenteditable 속성

div 태그에 텍스트를 입력할 수 있는 방법은 contenteditable 속성을 true로 설정하는 것입니다.

<div contenteditable="true"></div>

div 태그의 contenteditable 속성을 true로 설정하고 텍스트를 입력하면 다음 스크린샷처럼 파란색 테두리가 활성화되고 텍스트를 입력할 수 있습니다.

파란색 테두리를 비활성화하려면 div 태그의 스타일에 outline을 none으로 설정합니다.

<!-- outline 스타일 적용 -->
<div contenteditable="true" style="outline:none"></div>

<!-- React에서 outline 스타일 적용 -->
<div contentEditable="true" style={{outline:"none"}}></div>

---

텍스트 가져오는 방법

div 태그에는 onChange 이벤트가 존재하지 않으므로 div 태그에 입력한 텍스트를 가져오려면 jQuery를 사용하거나 onInput 이벤트를 사용합니다.

 

다음 예제는 React에서 div 태그에 onInput 이벤트 핸들러 함수를 설정하고 입력한 텍스트를 콘솔에 출력합니다.

export default function App() {
  return (
    <div
      contentEditable="true"
      style={{ height: "50px" }}
      onInput={(e) => console.log(e.currentTarget.textContent)}
    ></div>
  );
}

[실행 결과]

onInput 이벤트 핸들러 함수에서 div 태그에서 입력한 텍스트를 가져오고 싶으면, 현재 타겟(currentTarget)의 textContent 프로퍼티를 사용합니다.

---

contenteditable 속성을 적용해야 하는 상황

div 태그에 contenteditable 속성을 설정하지 않고 div 태그 내부에 input 또는 textarea 태그를 사용하면 되는데, div 태그에 스타일이 적용된 경우에는 사용하기 어려울 수 있습니다.

 

예를 들어, div 태그에 설정된 스타일 때문에 input 또는 textarea의 크기가 올바르지 않다던가 div 태그에 적용된 padding 또는 margin에 의해 남는 공간이 많다던가 등 div 태그에 적용된 스타일 때문에 input 또는 textarea 태그를 마음대로 사용할 수 없는 상황이 발생합니다.

 

따라서, div 태그에 적용된 스타일을 신경 쓰지 않고 텍스트를 입력하고 싶다면, input 태그와 textarea 태그를 활용하는 것보다 div 태그에 contenteditable 속성을 적용하는 것이 나을 수 있습니다.

---

정리

• div 태그에 텍스트를 입력하고 싶은 경우 contenteditable 속성을 true로 설정합니다.
• div 태그에 onChange 이벤트가 없으므로 onInput 이벤트로 텍스트를 가져옵니다.
• div 태그에 적용된 스타일에 의해 input, textarea 태그를 사용하지 못하는 경우 contenteditable 속성을 사용합니다.