What is the method for applying background color to text within a textbox?

Question

What is the method for applying background color to text within a textbox?

I am struggling to phrase this question properly and unable to find the solutions I need on Google. When searching, it only provides information on how to add an entire background color to a textbox, which is not what I am looking for. What I aim to achieve are results similar to the image linked below:

https://i.sstatic.net/1g4Ch.png

The goal is to add a background color to each individual character within an input tag, excluding spaces. As the user types inside the input tag, the characters should be highlighted with a background color but not the spaces.

Currently, I do not have any code as I am unsure of how to implement this using CSS or JavaScript if necessary. All I have is an

<input type="text">

My intuition tells me that JavaScript may be the solution, but I am uncertain of how to proceed (despite having knowledge of JS). How can I accomplish this task?

javascript html css

Answer 1

Answer №1

You could implement a contentEditable div element and utilize some JavaScript to insert text as spans.

<div contentEditable></div>

Here is the CSS styling:

span {
  background-color: red;
  margin-right: 2px;
}
div {
  border: 1px solid black;
}

var el = document.querySelector("div");

el.addEventListener("blur", () => {
  var content = el.textContent;
  var contents = content.split(" ");
  el.innerHTML = "";

  contents.forEach((item) => {
    el.innerHTML += `<span>${item}</span>`;
  });
});

This approach can help achieve something similar to this example.

Answer 2

You could implement a contentEditable div element and utilize some JavaScript to insert text as spans.

<div contentEditable></div>

Here is the CSS styling:

span {
  background-color: red;
  margin-right: 2px;
}
div {
  border: 1px solid black;
}

var el = document.querySelector("div");

el.addEventListener("blur", () => {
  var content = el.textContent;
  var contents = content.split(" ");
  el.innerHTML = "";

  contents.forEach((item) => {
    el.innerHTML += `<span>${item}</span>`;
  });
});

This approach can help achieve something similar to this example.

Answer 3

Answer №2

To implement the "mirroring" technique with precision, you can create an overlap between the input box and a mirrored element. The layout and text characteristics must match perfectly for this method to work effectively. Below is a simple example code snippet to demonstrate how this can be achieved:

const userInput = document.getElementById("user-input"),
  mirrorElement = document.getElementById("input-mirror");

userInput.addEventListener("keyup", function() {
  const wordsArray = userInput.value.split(" ").map(function(term) {
    const wordSpan = document.createElement("span");
    wordSpan.textContent = term;
    return wordSpan;
  });
  
  mirrorElement.innerHTML = "";
  
  for (let j = 0; j < wordsArray.length; j++) {
    mirrorElement.append(wordsArray[j], " ");
  }
});

.container {
  display: grid;
}

#user-input,
#input-mirror {
  font: inherit;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid;
  padding: 0;
  grid-row: 1;
  grid-column: 1;
}

#user-input {
  background: transparent;
}

#input-mirror > span {
  background: #0f0;
}

<div class="container">
  <span id="input-mirror"></span>
  <input id="user-input" type="text" />
</div>

Answer 4

To implement the "mirroring" technique with precision, you can create an overlap between the input box and a mirrored element. The layout and text characteristics must match perfectly for this method to work effectively. Below is a simple example code snippet to demonstrate how this can be achieved:

const userInput = document.getElementById("user-input"),
  mirrorElement = document.getElementById("input-mirror");

userInput.addEventListener("keyup", function() {
  const wordsArray = userInput.value.split(" ").map(function(term) {
    const wordSpan = document.createElement("span");
    wordSpan.textContent = term;
    return wordSpan;
  });
  
  mirrorElement.innerHTML = "";
  
  for (let j = 0; j < wordsArray.length; j++) {
    mirrorElement.append(wordsArray[j], " ");
  }
});

.container {
  display: grid;
}

#user-input,
#input-mirror {
  font: inherit;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid;
  padding: 0;
  grid-row: 1;
  grid-column: 1;
}

#user-input {
  background: transparent;
}

#input-mirror > span {
  background: #0f0;
}

<div class="container">
  <span id="input-mirror"></span>
  <input id="user-input" type="text" />
</div>

What is the method for applying background color to text within a textbox?

Answer №1

Answer №2

Similar questions

React scroll not triggering class changes

AngularJS search box functionality allows users to easily search through a

JavaScript array images are not showing when using the img tag

What other function can I combine with the foreach function?

What is the best way to eliminate the background color from one span after selecting a different one?

Attempting to limit entry to a pathway when the loggedIn criterion is satisfied

What is the best way to combine text from various group radio buttons?

Is there a way to trigger Material-UI SpeedDialAction onClick events only when the SpeedDial is open and clicked, not when it is hovered over?

Using InnerHTML in Javascript within the Quasar/VueJS framework is unsupported

Embarking on the GSAP journey

How can I code a div to automatically scroll to the top of the page?

What is the best way to update a data value in one Vue Js component and have it reflected in another component?

Encountering an issue when attempting to send a post request with an image, resulting in the following error: "Request failed with status code

AngularJS restricts the display of elements to only 4 using the limitTo filter

Matching up irregular rows in div-made table

Enhancing w3-import-html with JavaScript

Infinite dice roller for a six-sided die

Finding the correct tablet browser resolution for optimal web design

Having trouble releasing the package on npm platform

Altering an element's visibility from 'none' will trigger its animation to play once again