how to make enter on input show up on output

Question

When the user presses enter in the input box I would like that to reflect in the H1 tag.

As you can see when the user types Line 1 they can press enter and create line 2 in the input no problem, but the output in the h1 tag is still "Line 1 line 2" all on one line.

Please look at the fiddle as that will make a lot more sense.

I was thinking about using a keypress function to get when the user presses enter and then do something with that? I'm not sure if there is a better way though.

https://jsfiddle.net/BSmyth634/ovz8thrp/

<div ng-app>
   <form>
     <textarea rows="4" type="text" ng-model="todoText" size="30" placeholder="add new todo here">
     </textarea>
   </form>
   <h1>
    {{todoText || 'Hello World'}}
   </h1>
</div>

You basically want to change `\n` into a `
`, see the duplicate questions above. You can do this with filter(s) or you can use `white-space: pre` in CSS. — Spencer Wieczorek, Oct 02 '16 at 06:45
Please specify this is an AngularJS question... tags are not sufficient. — Loenix, Oct 02 '16 at 06:49

score 1 · Answer 1 · answered Oct 02 '16 at 06:45

1

You need to use style="white-space: pre;" in your code to do it.

JS Fiddle

answered Oct 02 '16 at 06:45

Techidiot

1,921
1
15
28

score 0 · Answer 2 · answered Oct 02 '16 at 06:45

0

I see two ways to achieve what you want.

Use white-space css property. In your case the pre-line value might be interesting.
Create Angular's filter and use it.

answered Oct 02 '16 at 06:45

Michał Szepielak

284
1
4

score 0 · Answer 3 · answered Oct 02 '16 at 06:48

0

you can use pre element instead of h1

<pre>{{todoText || 'Hello World'}}</pre>

or use this

<h1 ng-repeat="line in todoText.split('\n')">
    {{line}}
</h1>

answered Oct 02 '16 at 06:48

fingerpich

8,500
2
22
32

score 0 · Answer 4 · answered Oct 02 '16 at 06:50

0

Jquery approach

$("textarea").on('keypress',function(e){
    if(e.keyCode == 13){
        $('h1').html($("textarea").val())
    }

})

answered Oct 02 '16 at 06:50

Akshay

815
7
16

`ng-model` already does this in angular, it's a two-way data-binding. This also won't solve OP's problem. – Spencer Wieczorek Oct 02 '16 at 06:51

how to make enter on input show up on output

4 Answers4