0
177
ViewsHow 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:
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?
2 answers
Answer question0
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
0
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>