How to go next paragraph if i filled the form data or numbers..?

I have a introduction form like a filling my bio data or information. I filled in different paragraphs and numbers. But the output will shows only single paragraphs

 <div class="col-lg-12">     <div class="form-group">         <textarea autocomplete="off" rows="4" class="form-control"              name="introduction"  type="text"         ></textarea>      </div> </div> 

I tried to get Output like

    1     2     3     1).One     2).Two     3).Three 

But in my form if i filled the data or numbers output shows like

1 2 3 1).One 2). Two  3).Three 

5 Answers

Answers 1

It's a CSS problem, not a JavaScript problem. HTML collapses white space by default — this includes ignoring newlines.

Add white-space: pre-wrap to the output div.

following is the sample code :

{ white-space: pre-wrap } 

Answers 2

CODEPEN here Useful if you're using jQuery

https://codepen.io/lenmorld/pen/GvWgGE

in your javascript try this (reference your textarea by name and/or id)

var text = document.forms[0].introduction.value; text = text.replace(/\r?\n/g, '<br />'); 

This replaces all line feed (/r/n) with HTML line breaks (br)

from here

JavaScript: How to add line breaks to an HTML textarea?

Answers 3

use JQuery Keyboard events

$(document).keydown(function (event) {       toCharacter(event.keyCode);  });  function toCharacter(keyCode) {      // delta to convert num-pad key codes to QWERTY codes.     var numPadToKeyPadDelta = 48;      // if a numeric key on the num pad was pressed.     if (keyCode >= 96 && keyCode <= 105) {         keyCode = keyCode - numPadToKeyPadDelta;         return String.fromCharCode(keyCode);     }      if (keyCode == 106)         return "*";      if (keyCode == 107)         return "+";      if (keyCode == 109)         return "-";      if (keyCode == 110)         return ".";      if (keyCode == 111)         return "/";      // the 'Enter' key was pressed     if (keyCode == 13)         return "=";  //TODO: you should change this to interpret the 'Enter' key as needed by your app.      return String.fromCharCode(keyCode); } 

Answers 4

http://jsfiddle.net/z02L5gbx/198/

.directive('nextOnEnter', function () {     return {         restrict: 'A',         link: function ($scope, selem, attrs) {             selem.bind('keydown', function (e) {                 var code = e.keyCode || e.which;                 if (code === 13) {                     e.preventDefault();                     var pageElems = document.querySelectorAll('input, select, textarea'),                         elem = e.srcElement                         focusNext = false,                         len = pageElems.length;                     for (var i = 0; i < len; i++) {                         var pe = pageElems[i];                         if (focusNext) {                             if (pe.style.display !== 'none') {                                 pe.focus();                                 break;                             }                         } else if (pe === e.srcElement) {                             focusNext = true;                         }                     }                 }             });         }     } }) 

Source: angularjs move focus to next control on enter

Answers 5

The best solution I could think of was to create a filter:

angular.module('myApp'). filter('nlToArray', function() {   return function(text) {       return text.split('\n');   }; }); 

This takes a block of text and creates a new array element for each paragraph.

This array can then be plugged into an ng-repeat directive:

<p ng-repeat="paragraph in textBlock|nlToArray track by $index">{{paragraph}}</p> 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati