更改文本区域中文本的背景颜色

Question

我想更改文本区域中文本的背景颜色。

不是文本区域的背景色。每个字符的背景。 喜欢选择文字。

我想看到每行末尾的空格。或者一行没有文本，只有空格。即使输入新文本，颜色也应显示。

如果可能，我不想使用javascript。仅CSS。

它应该看起来像这样： 。这是一个选定的文本。我希望它无需选择即可查看。

Answer 1

您需要使用javascript突出显示文本区域中的文本。

const bgcolor = "#3297FD";

const textarea = document.getElementById("textarea");
const bgtext = document.getElementById("highlight");

function highlight() {
	bgtext.innerHTML = "";
	let val = textarea.value;
	let len = val.length;
	for (let i = 0; i < len; i++) {
		if (val[i] == "\n") {
			bgtext.innerHTML += "<br />";
		} else {
			bgtext.innerHTML += "<span style=\"background-color: [[bgcolor]];\">&#32;</span>".replace("[[bgcolor]]", bgcolor);
		}
	}
}

setInterval(highlight, 0);

.text {
	position: fixed;
	top: 20px;
	left: 20px;
	width: 300px;
	height: 300px;
	background-color: transparent;
	margin: 0px;
	font-size: 14px;
	font-family: monospace;
	white-space: pre;
	color: white;
}

<style>
.text {
	position: fixed;
	top: 20px;
	left: 20px;
	width: 600px;
	height: 600px;
	background-color: transparent;
	margin: 0px;
	font-size: 14px;
	font-family: monospace;
	white-space: pre;
	color: white;
}
</style>
<p id="highlight" class="text"></p>
<textarea id="textarea" class="text" style="left:17px; top:18px;"></textarea>