显示textarea的多行纯文本？

Posted 2023-05-07

【中文标题】显示textarea的多行纯文本？

【英文标题】：Show multiline plain text of textarea?

【发布时间】：2012-08-09 23:39:32

【问题描述】：

我只想显示 textarea 的多行纯文本，但我不想显示 textarea。

例子：

文本区域：

|===================|
| First line        |
| Second line       |
|___________________|

多行纯文本：

First line
Second line

我该怎么做？

【问题讨论】：

你想做什么？将'\r\n' 替换为<br /> 或隐藏该区域的边界？

据我了解，您可以将这种样式用于您的文本区域：border:none; background:transparent;

喜欢这个jsfiddle.net/j08691/82cTq ?

@StrubT：我想隐藏边框并禁用 textarea 的可编辑性。

@Bood Carley：据我所知，您已经找到了答案。

【参考方案1】：

您可以使用<pre>，它定义了预格式化的文本并保留了空格和换行符：

var txt="First line\nSecond line";
document.body.innerhtml+="<pre>"+txt+"</pre>";

或者如果你想用 CSS 来做，或者你想要更多关于空格和换行符的选项，你可以使用 CSS 属性white-space：

javascript：

var txt="First line\nSecond line";
document.getElementById('mydiv').innerHTML=txt;

CSS：

#mydivwhite-space:pre;

【参考方案2】：

文本区域的 CSS：

textarea  
    border-style: none; 
    border-color: Transparent; 
    overflow: auto;