0
219
ViewsHaga palabras en el marcador de posición mientras escribe en javascript
Quiero hacer una aplicación de verificación de precisión de escritura. Lo que quiero lograr es hacer que las palabras (el usuario debe escribir) en el placeholder de posición o similar a los efectos del placeholder de posición mientras los usuarios escriben.
Cuando el usuario escribe las palabras en la input , la palabra en el marcador de posición debe desaparecer o encajar en las palabras de la input (el usuario no puede verla).
Revisé varios otros ejemplos en stackoverflow, por ejemplo , pero nada me ayuda.
Este es el efecto que quiero lograr 
¿Alguien podría darme algunas ideas y soluciones de cómo resolver esto?
He estado luchando con esto durante mucho tiempo.
¡Gracias por cualquier respuesta!
*Lo siento, mi inglés apesta. Quiero algo como esto en este sitio web.
1 answers
Answer question0
Mira esto. https://jsfiddle.net/dgstcu0y
El resumen de lo que probé aquí está a continuación:
Agrego un detector de eventos que tomará la entrada y la insertará en nuestro
div, que es como una entrada personalizada.const entrada = documento.getElementById("entrada") const contenido = documento.getElementById("contenido")
input.addEventListener("input",(event)=>{ const value = event.target.value content.innerHTML = value })Luego, hago la entrada transparente. Pero el problema es que también hace que el cursor sea transparente. Entonces, traté de agregar
|después de nuestro div de entrada personalizado.Usando CSS, traté de superponer nuestro div personalizado con una entrada genérica.
.wrapper { posición: relativo; ancho: 300px; } #entrada { color: transparente; relleno: 0; fondo: transparente; } .custom-input { posición: absoluta; superior: 0; color: gris; índice z: -1; } #contenido:después de { contenido:"|" }
Aquí está el esqueleto HTML.
<html> <body> <div class="wrapper"> <input id="input"> <div class="custom-input"> <span id="content"></span> <span>My Suggestions</span> </div> </div> </body> </html>Personalízalo según tu necesidad.