CODEWITHSUNDEEP
javascripthtmlcss
EthernalHusky
EthernalHusky

Reputation: 485

How to add background color to text inside textbox?

I do not know how to ask this question correctly and I do not know how to find solutions in google because it leads me to how to add entire background color to a textbox which I am not looking for. I am trying to achieve such results like image below:

enter image description here

I want to add background to each text(of course characters) inside a input tag except spaces. User will start typing stuff inside input tag and will apply background color but spaced text won't color.

I do not have any code because I do not know how to do it using css or JS if neccesary. I just have a

<input type="text">

I think it might use only JS but I do not know how to(of course I know JS). How do I achieve that?

Upvotes: 0

Views: 960

Answers (2)

Noam
Noam

Reputation: 1624

Another method is to overlap the input box with a "mirroring" element. The overlap must be precise, both in layout and text characteristics. Here is a minimal example:

var input = document.getElementById("input"),
  mirror = document.getElementById("input-mirror");

input.addEventListener("keyup", function() {
  var words = input.value.split(" ").map(function(a) {
    var span = document.createElement("span");
    span.textContent = a;
    return span;
  });
  mirror.innerHTML = "";
  for (let i = 0; i < words.length; i++) {
    mirror.append(words[i], " ");
  }
});
.container {
  display: grid;
}

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

#input {
  background: transparent;
}

#input-mirror > span {
  background: #0f0;
}
<div class="container">
  <span id="input-mirror"></span>
  <input id="input" type="text" />
</div>

Upvotes: 2

Anees
Anees

Reputation: 589

You can use div with contentEditable and use little js to append text as span

<div contentEditable></div>

CSS

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

Something like this

Upvotes: 3

Related Questions