텍스트 영역 및 입력에서 다중 색상 텍스트 강조를 어떻게 달성할 수 있습니까?

텍스트 영역 및 입력에서 다중 색상 텍스트 강조 표시

텍스트 영역 및 입력 필드에서 다중 색상 텍스트 강조 표시가 관심을 불러일으켰으며 이에 접근하는 방법에 대한 지침을 구합니다. 일. 처음 생각에는 CSS, JavaScript 및 약간의 마법이 혼합되어 있었지만 관련된 제한 사항을 이해하는 것이 중요합니다.

기술적 과제

그렇지 않습니다. CSS를 사용하여 텍스트 영역이나 입력 필드에서 직접 다중 색상 텍스트 강조 표시를 달성할 수 있습니다. 이러한 요소에는 텍스트의 특정 섹션에 다양한 스타일을 적용하기 위한 지원이 부족합니다. 텍스트 색상을 수정하려고 하면 입력 또는 텍스트 영역 내의 전체 콘텐츠에 영향을 미칩니다.

해결책: 콘텐츠 편집 가능 요소 수용

대화형 텍스트에서 구문 강조를 달성하려면 필드에서는 콘텐츠 편집 가능한 요소를 사용하는 방향으로 접근 방식을 전환해야 합니다. 이러한 특수 요소를 사용하면 HTML 문서 내에 편집 가능한 텍스트 영역을 만들 수 있습니다. contentEditable 기능을 통합하면 서로 다른 텍스트 섹션에 다양한 CSS 스타일을 적용할 수 있습니다.

예

다음 코드 조각을 예로 들어보세요.

<code class="html"><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><div contenteditable="true">
  <span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</div>