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

Posted

技术标签:

【中文标题】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>

【讨论】:

以上是关于ko.JS 数据绑定从文本区域获取输入 - 不捕获 /n的主要内容,如果未能解决你的问题,请参考以下文章

从文本区域获取文本时如何保留换行符?

HTML5如何从文本区域中获取选定的文本

jQuery - 从文本区域中删除用户输入文本

如何使用 PHP 从文本区域解析文本中的 \n 符号

如何在javascript中检索文本区域的值

文本区域输入上的 JavaScript 正则表达式