How Can I Style Specific Parts of an Input Field Value Using JavaScript?

Styling Specific Portions of Input Field Values

Within an field, changing the style of specific portions of the user's input can be challenging. Since styles generally apply to the entire element, it's not directly achievable.

JavaScript-Based Solution

To circumvent this limitation, a JavaScript-based approach can be employed. Replace the element with a container element like a <div> and style it to resemble an input field.

Division of Input Field

When the user types, identify the three sections of the field:

• Before the changes (non-edited)
• At the point of changes (edited)
• After the changes (non-edited)

Wrap these divisions in separate elements like . Example markup:

<div>

Event Handling and Style Adjustment

Use click, keydown, and keyup events to identify the three divisions dynamically. Apply styling to these spans as needed to achieve the desired effect.

Example HTML:

<div class="input">

JavaScript to Replace Input:

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

Event Handling and Span Addition:

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);
});

The above is the detailed content of How Can I Style Specific Parts of an Input Field Value Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!