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

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>
<p><strong>Event Handling and Style Adjustment</strong></p>
<p>Use click, keydown, and keyup events to identify the three divisions dynamically. Apply styling to these spans as needed to achieve the desired effect.</p>
<p><strong>Example HTML:</strong></p>
<pre class="brush:php;toolbar:false"><div class="input">
<p><strong>JavaScript to Replace Input:</strong></p>
<pre class="brush:php;toolbar:false">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);
});