HTML textarea 可以滚动但无法编辑？

Question

我已将文本格式化为换行符。文本多于垂直放置，因此它会滚动。很好。

const securityMessage = 'Here's my text.\r\nHere's another line and so on.';

我需要在页面的滚动区域中显示文本，但有一个带有 HTML textarea 的模式，我的用户可以在其中编辑文本。

首先我尝试使用 textarea，它工作正常但可以编辑。但是设置控件的 readonly 属性也不允许滚动，所以用户不能在不打开模式的情况下预览所有文本。

<textarea name="secMsg" formControlName="secMsg" cols="30" rows="15" class="form-control h-100" disabled>
</textarea>

我也尝试过使用 Angular:

的可滚动 DIV

<div class="secMsg" [innerHTML]="securityMessage"></div>

除了它不是 HTML 并且不识别字符串换行符。

所以，我的编辑器需要一个带换行符的纯字符串 textarea 但在无法编辑的滚动区域中显示此文本。

Answer 1

您的 div 解决方案会起作用，它只需要一些 CSS 来处理换行符。

css white-space 属性是您正在寻找的，很可能 white-space: pre-line; 但您可以尝试其他选项以查看适合您的用例最好的。

HTML textarea with scroll but prevent editing?