0
187
Views¿Cómo agregar color de fondo al texto dentro del cuadro de texto?
No sé cómo hacer esta pregunta correctamente y no sé cómo encontrar soluciones en Google porque me lleva a cómo agregar un color de fondo completo a un cuadro de texto que no estoy buscando. Estoy tratando de lograr tales resultados como la imagen a continuación:
Quiero agregar un fondo a cada texto (por supuesto, caracteres) dentro de una etiqueta de input , excepto espacios. El usuario comenzará a escribir cosas dentro de la etiqueta de input y aplicará el color de fondo, pero el texto espaciado no se coloreará.
No tengo ningún código porque no sé cómo hacerlo usando css o JS si es necesario. solo tengo un
<input type="text">
Creo que podría usar solo JS, pero no sé cómo (por supuesto que sé JS). ¿Cómo logro eso?
2 answers
Answer question0
Puede usar div con contentEditable y usar little js para agregar texto como intervalo
<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>`; }); });Algo como esto
0
Otro método es superponer el cuadro de entrada con un elemento de "reflejo". La superposición debe ser precisa, tanto en el diseño como en las características del texto. Aquí hay un ejemplo mínimo:
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>