입력 필드의 텍스트 부분에 스타일을 지정할 수 있습니까?

입력 필드 부분 스타일 지정

질문:

다른 방식으로 적용할 수 있습니까? 사용자가 입력할 때 입력 필드 값의 특정 세그먼트에 대한 스타일 텍스트?

답변:

안타깝게도 스타일을 입력 필드의 일부에 선택적으로 적용할 수 없습니다.

해결 방법:

원하는 효과를 얻으려면 여러 요소를 포함하는 솔루션이 필요합니다.

접근방식:

1. 요소 분할:

   • 분할 삽입에 따라 입력 필드를 세 개의 섹션으로 나눕니다. 지점:

     • 이전: 이전에 입력한 텍스트
     • 편집: 현재 입력 중인 텍스트
     • 이후 : 삽입 후 입력된 텍스트 point

2. 마크업 생성:

   • 입력 요소를 다음과 유사한 컨테이너 요소로 바꿉니다. 입력 필드.
   • 원래 입력 값을 언급된 세 섹션으로 분할합니다.
   • 각 섹션을 개별 요소(예: 스팬)로 묶습니다.

3. 이벤트 처리:

   • 이벤트 리스너를 사용하여 사용자 입력을 모니터링합니다(예: 클릭, 키다운, keyup).
   • 이 이벤트를 사용하여 입력 값의 세 섹션을 식별합니다.
   • 편집된 섹션을 기반으로 요소 스타일을 업데이트합니다.

마크업 예:

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

위 내용은 입력 필드의 텍스트 부분에 스타일을 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!