> 웹 프론트엔드 > CSS 튜토리얼 > 텍스트 영역 및 입력에서 다중 색상 텍스트 강조를 어떻게 달성할 수 있습니까?

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

DDD
풀어 주다: 2024-11-01 20:33:02
원래의
558명이 탐색했습니다.

How Can I Achieve Multicolor Text Highlighting in Text Areas and Inputs?

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

텍스트 영역 및 입력 필드에서 다중 색상 텍스트 강조 표시가 관심을 불러일으켰으며 이에 접근하는 방법에 대한 지침을 구합니다. 일. 처음 생각에는 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>
로그인 후 복사

이 예에서는 contenteditable 속성이

요소를 편집 가능하게 만듭니다. 이 콘텐츠 내에서 특정 CSS 스타일의 요소를 사용하여 키워드 "var" 및 "bar"를 각각 파란색과 녹색으로 표시했습니다.

위 내용은 텍스트 영역 및 입력에서 다중 색상 텍스트 강조를 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿