JavaScript를 사용하여 입력 필드 값의 특정 부분에 스타일을 지정하려면 어떻게 해야 합니까?

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

필드에서는 사용자 입력의 특정 부분 스타일을 변경하는 것이 어려울 수 있습니다. 스타일은 일반적으로 전체 요소에 적용되므로 직접적으로 구현할 수는 없습니다.

JavaScript 기반 솔루션

이러한 제한을 우회하려면 JavaScript 기반 접근 방식을 사용할 수 있습니다. <div>와 같은 컨테이너 요소가 있는 요소 입력 필드와 비슷하게 스타일을 지정하세요.

입력 필드 구분

사용자가 입력할 때 필드의 세 섹션을 식별하세요.

• 변경 전(무수정)
• 변경 시점 (편집됨)
• 변경 후(편집되지 않음)

과 같은 별도의 요소로 이러한 구분을 래핑합니다. 마크업 예:

<div>

이벤트 처리 및 스타일 조정

click, keydown 및 keyup 이벤트를 사용하여 세 개의 구분선을 동적으로 식별합니다. 원하는 효과를 얻으려면 필요에 따라 이러한 범위에 스타일을 적용하세요.

예제 HTML:

<div class="input">

입력을 대체할 JavaScript:

let input = document.getElementById("fakeInput");
let originalInput = document.querySelector("input");
input.replaceWith(originalInput);

이벤트 처리 및 범위 추가:

originalInput.addEventListener("input", (e) => {
  let before = originalInput.value.substring(0, e.target.selectionStart);
  let edited = originalInput.value.substring(e.target.selectionStart, e.target.selectionEnd);
  let after = originalInput.value.substring(e.target.selectionEnd);

  let nonEditedBefore = document.createElement("span");
  nonEditedBefore.className = "nonEdited before";
  nonEditedBefore.textContent = before;

  let editedSpan = document.createElement("span");
  editedSpan.className = "edited";
  editedSpan.textContent = edited;

  let nonEditedAfter = document.createElement("span");
  nonEditedAfter.className = "nonEdited after";
  nonEditedAfter.textContent = after;

  input.appendChild(nonEditedBefore);
  input.appendChild(editedSpan);
  input.appendChild(nonEditedAfter);
});

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