ko.JS databinding to fetch input from Text Area - Not capturing /n

0
votes

Below is my code for the text area.

<div>

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

</div>

Text Area

I want to display the content entered in this text area in another DIV.

Below is the code to display the content of text area. 

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

This div is displayed as shown in the below image.

enter image description here

Issue: The new line is not captured when I am displaying the content in another div.

What all I tried? I tried below ways to see if new line /n will be displayed as is, from text area. But, no luck !

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

Please suggest if anyone has faced such issues.

Thank You!

2
htmlknockout.jsdata-bindingtextareanewline

2 Answers

0
votes

It's a bit dirty, but... You can replace '\n' with '' for display 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>
0
votes

Add the css rule white-space: pre-wrap to your 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>