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的主要内容,如果未能解决你的问题,请参考以下文章