Me gustaría mostrar una superposición sobre el área de texto para mostrar la entrada formateada (el área de texto no admite etiquetas en el interior). Por ahora, puedo pasar el texto que se ingresó en el área de texto para superponer div, pero no pude ocultar el texto en el área de texto y me molesta:
overlay = document.getElementById('overlay') query_template = document.getElementById('query_template') query_template.addEventListener('input', (e) => { console.log(query_template.value); overlay.innerText = query_template.value; query_template.innerHTML = query_template.value; }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ border:1px solid transparent } div, textarea { position: absolute; width: 300px; height: 200px; top: 0; left: 0; font-size: 1em; line-height: 1em; } </style> </head> <body> <body> <div class="parent"> <div id="overlay" style="color: #1a1a1a"></div> <textarea id="query_template" style="color: white; background: transparent"></textarea> </div> </body> </body> </html>¿Cómo puedo ocultar texto en textarea?