I would like to display an overlay over textarea to display formatted input (textarea does not support tags inside). For now I'm able to pass text that inputed into text area to overlay div but I could not hide text in textarea and it bothers:
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>How can I hide text in textarea?