How to add background color to text inside textbox?-CodePudding

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:

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?

CodePudding user response：

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

CodePudding user response：

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:

HTML

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

CSS

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

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], " ");
    }
});