带有叠加层的文本区域：在文本区域中隐藏文本答案

【问题标题】：Textarea with overlay: hide text in textarea带有叠加层的文本区域：在文本区域中隐藏文本
【发布时间】：2022-01-13 09:25:56
【问题描述】：

我想在 textarea 上显示一个覆盖以显示格式化输入（textarea 不支持内部标签）。现在我可以将输入到文本区域的文本传递给覆盖 div，但我无法在 textarea 中隐藏文本，这很麻烦：

    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>

如何在 textarea 中隐藏文本？

【问题讨论】：

标签： javascript html css

【解决方案1】：

你可以设置

textarea{
color:transparent;
}

【讨论】：

【解决方案2】：

试试不透明度。

textarea {
    opacity: 0;
}

【讨论】：