ko.JS 数据绑定从文本区域获取输入 - 不捕获 /n

Posted 2023-05-07

【中文标题】ko.JS 数据绑定从文本区域获取输入 - 不捕获 /n

【英文标题】：ko.JS databinding to fetch input from Text Area - Not capturing /n

【发布时间】：2017-02-13 11:21:29

【问题描述】：

下面是我的文本区域代码。

<div>

<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>

</div>

我想在另一个 DIV 中显示在此文本区域中输入的内容。

下面是显示文本区域内容的代码。

<div data-bind="text: environment"/>

这个 div 如下图所示。

问题： 当我在另一个 div 中显示内容时，不会捕获新行。

我都尝试了什么？ 我尝试了以下方法来查看新行 /n 是否会从文本区域按原样显示。 但是，没有运气！

<div data-bind="html: environment"/>
<div data-bind="value: environment"/>

如果有人遇到过此类问题，请提出建议。

谢谢！

【参考方案1】：

将 css 规则 white-space: pre-wrap 添加到您的 div：

var viewModel = 
  environment: ko.observable("initial text")


ko.applyBindings(viewModel);

div 
  white-space: pre-wrap;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>Change text and click outside textarea in order to update value.</div>

<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>

<div>Entered text:</div>
<div data-bind="html: environment()"></div>

【参考方案2】：

有点脏，但是...你可以用''替换'\n'来显示div：

var viewModel = 
  environment: ko.observable("initial text")


ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div>Change text and click outside textarea in order to update value.</div>

<textarea data-bind="value: environment" rows="10" cols="20" class="form-group"></textarea>

<div>Entered text:</div>
<div data-bind="html: environment().replace('\n', '</br>')"></div>