帶有疊加層的文本區域：在文本區域中隱藏文本

Question

我想在 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 中隱藏文本？

Answer 1

你可以設置

textarea{
color:transparent;
}

Answer 2

試試不透明度。

textarea {
    opacity: 0;
}

帶有疊加層的文本區域：在文本區域中隱藏文本

問題描述

2 個解決方案

解決方案1
1 已采納 2022-01-13 09:32:04

解決方案2
1 2022-01-13 09:45:29

帶有疊加層的文本區域：在文本區域中隱藏文本

問題描述

2 個解決方案

解決方案1 1 已采納 2022-01-13 09:32:04

解決方案2 1 2022-01-13 09:45:29

解決方案1
1 已采納 2022-01-13 09:32:04

解決方案2
1 2022-01-13 09:45:29