如果填写表格数据或数字，如何进入下一段......？

Question

我有一个介绍表格，如填写我的生物数据或信息。我填写了不同的段落和数字。但输出只显示单个段落

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

    </div>
</div>

我试着让输出像

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

但在我的形式，如果我填写数据或数字输出显示像

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

Answer 1

这是一个CSS问题，而不是JavaScript问题。默认情况下，HTML会折叠空白区域 - 这包括忽略换行符。

将white-space: pre-wrap添加到输出div。

以下是示例代码：

{
white-space: pre-wrap
}

Answer 2

如果你使用jQuery，CODEPEN很有用

在你的JavaScript中试试这个（按名称和/或id引用你的textarea）

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

这将使用HTML换行符替换所有换行符（/ r / n）（br）

参考：JavaScript: How to add line breaks to an HTML textarea?

Answer 3

使用JQuery Keyboard事件

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

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

资料来源：angularjs move focus to next control on enter