Question

大家好

我多次听说 textarea 标签中的HTML和CSS格式是不可能。但是，如果您查看http://www.w3schools.com的源代码，尤其是 尝试编辑 ，您可以看到它只是一个文本区域。

试用编辑器： http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-image

我确实找到了一些 javascript 代码（可能）为文字着色：

function colorcoding() {
    var text = document.getElementById("textareaCode").value;
    text = text.replace(/&/g, "&amp;");
    text = text.replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");   
    text = text.replace(/  /g, " &nbsp;");  
    text = text.replace(/</g, "&lt;");
    text = text.replace(/>/g, "&gt;");
    text = text.replace(/(?:\r\n|\r|\n)/g, '<br>');
    text = text.replace(/<br> /g, "<br>&nbsp;");  
    text = w3CodeColorize(text);
    document.getElementById("codecolor").innerHTML = text + "<br>";
}

我确实试图复制CSS，但它没有为文本着色。

有人可以解释一下w3colorize函数是如何工作的吗？

提前谢谢

Answer 1

那是因为你无法格式化textarea。

如果您查看html和您刚刚发布的函数，您可以看到他们将textarea的值放在最后的div中。 div如下：

<div id="codecolor" class=" codecolorCC"></div>

它位于html内textarea的正上方。正如您在css中看到的，他们使用-webkit-text-fill-color: transparent;来隐藏文本区域中的文本。这与background-color: transparent !important;结合并关闭边框使其100％透明。然后你看到的是它背后的<div>，文本在跨度内格式化。

那是怎么回事。

在textareas格式化（特别是，W3Schools如何做）

1 个答案: