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

Question

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

Why not using the TAB button - KISS? https://en.wikipedia.org/wiki/KISS_principle — lin, Feb 20 '17 at 10:21
This is the suposed use of an enter key- https://en.wikipedia.org/wiki/Enter_key — lin, Feb 20 '17 at 10:25
What have you tried? Please add some codes. You know the HTML attribute `tabindex`? https://www.w3schools.com/Tags/att_global_tabindex.asp — lin, Feb 20 '17 at 10:32
@Kondal it was necessary to ask a brand new question instead of rewriting your original one. Now you have lots of comments and answers that don't relate at all to your new question. This makes it confusing for everyone. — K Scandrett, Aug 02 '17 at 00:32

score 2 · Answer 1 · edited Jun 20 '19 at 12:21

2

CODEPEN is useful if you're using jQuery

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)

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

edited Jun 20 '19 at 12:21

Star

3,222
5
32
48

answered Aug 03 '17 at 14:06

squidwardprops02

135
6

why need to use complex JS if simple CSS can solve it for us? – Star Aug 08 '17 at 09:42

Star · Accepted Answer · 2017-08-08T10:40:11.743

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
}

edited Aug 08 '17 at 10:40

answered Aug 07 '17 at 12:12

Star

3,222
5
32
48

score 0 · Answer 3 · edited Jun 20 '19 at 12:21

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);
}

score -1 · Answer 4 · edited Jun 20 '19 at 12:21

Live URL: 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

Great and it also works with TAB as autofocus function. This will work untill the user have to fill a textarea and try to make a break inside the text. — lin, Feb 20 '17 at 10:34
You should have mark it as a duplicate instead of copying/pasting an existing answer. — Mistalis, Feb 20 '17 at 10:54

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

4 Answers4