CODEWITHSUNDEEP
javascripthtmlcss
Альберт Александров
Альберт Александров

Reputation: 901

Textarea with overlay: hide text in textarea

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?

Upvotes: 0

Views: 219

Answers (2)

SoftViruS
SoftViruS

Reputation: 119

Try opacity.

textarea {
    opacity: 0;
}

Upvotes: 1

user17721051
user17721051

Reputation:

u can set

textarea{
color:transparent;
}

Upvotes: 1

Related Questions