이제 contenteditable 및 'plaintext-only' 속성 값 조합을 기준으로 새로 사용할 수 있습니다.

Thomas Steiner

게시일: 2025년 3월 20일

기념: 이제 이 웹 기능을 세 가지 주요 브라우저 엔진에서 모두 사용할 수 있으며 2025년 3월 4일부터 기준점(신규)이 됩니다.

사용자가 일반 텍스트 정보를 입력하도록 허용하려면 먼저 <textarea>를 사용하고 싶을 수 있습니다. 이 방법은 많은 경우에 사용할 수 있으며 양식에서 작동하도록 하기 위해 특별한 노력을 기울일 필요가 없지만 제한사항도 있습니다.

한 가지 예는 해킹으로 해결하지 않고 콘텐츠를 통해 <textarea>를 동적으로 늘리는 것입니다. field-sizing: content가 있지만 브라우저 지원이 제한적입니다. 여기에서 contenteditable="plaintext-only" 속성 값 조합이 사용됩니다. <div>와 같은 일반 요소에 추가하고 요소가 자동으로 크기 조절을 처리하도록 할 수 있습니다.

또 다른 제한사항은 스타일 지정입니다. CSS Custom Highlight API는 JavaScript를 사용하여 범위를 만들고 CSS를 사용하여 스타일을 지정하여 문서의 임의 텍스트 범위에 스타일을 지정하는 메커니즘을 제공합니다. <textarea>는 내부적으로 사용자 에이전트 섀도우 루트에서 <div>를 사용하므로 CSS Custom Highlight API로 텍스트 스타일을 지정해도 작동하지 않습니다. 직접 만든 contenteditable와 같은 <div> 요소에 사용하면 CSS Custom Highlight API가 제대로 작동합니다.

<style>
  ::highlight(highlight) {
    background-color: yellow;
    color: black;
  }
</style>

<div contenteditable="plaintext-only">Edit me</div>

<script>
  const parentNode = document.querySelector('div').firstChild;
  const range = new Range();
  range.setStart(parentNode, 0);
  range.setEnd(parentNode, 3);
  const highlight = new Highlight(range);
  CSS.highlights.set('highlight', highlight);
</script>

다음은 이 제한사항을 보여주는 데모의 스크린샷입니다. <textarea>의 텍스트에는 스타일이 적용되지 않지만 두 개의 contenteditable 일반 <div> 요소의 텍스트에는 스타일이 적용됩니다.