입력 필드 값의 특정 부분에 다양한 색상을 적용하려면 어떻게 해야 합니까?

입력 필드 값 부분 스타일 지정

입력 필드에 텍스트가 빨간색으로 표시되지만 특정 부분을 구별해야 하는 시나리오를 고려 파란색을 사용하여 이 문의는 이러한 스타일을 달성할 수 있는 가능성을 다룹니다. 효과.

정답:

안타깝게도 CSS 스타일은 전체 입력 요소에 균일하게 적용되므로 특정 부분을 선택적으로 변경할 수 없습니다.

해결책:

이 제한을 우회하려면 입력 필드를 세 개의 논리적 섹션으로 나누는 다중 요소 접근 방식이 필요합니다:

• 편집 시점 전(편집되지 않은 부분)
• 편집 시점(현재 편집된 부분)
• 수정 시점 이후(수정되지 않은 부분)

이 구분은 불가능합니다. 단일 입력 요소를 통해 달성되므로 JavaScript를 사용해야 합니다.

1. 초기 마크업:
   스타일이 지정되지 않은 표준 입력 요소로 시작하세요. JavaScript는 이 입력 요소를 입력 필드와 유사하도록 설계된 양식화된 컨테이너 요소로 대체합니다.
2. 동적 래핑:
   JavaScript 이벤트 핸들러(예: 클릭, 키다운, 키업)를 구현합니다. 세 가지 부문을 식별합니다. 이러한 부분을 적절한 HTML 요소(예: )로 감싸고 필요에 따라 고유한 스타일을 적용합니다.

마크업 예:

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

Through 이 방법을 사용하면 입력 필드의 접근성을 유지하면서 입력 필드 값의 특정 부분을 스타일 지정하는 원하는 효과를 얻을 수 있습니다.

위 내용은 입력 필드 값의 특정 부분에 다양한 색상을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!