2017-02-20 12 views
-5

У меня есть форма представления, как заполнение моих био данных или информации. Я заполнил разные абзацы и цифры. Но выход будет показан только отдельные пунктыКак перейти к следующему абзацу, если я заполнил данные формы или цифры ..?

<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 
+1

Почему не с помощью кнопки TAB - ПОЦЕЛУЙ? https://en.wikipedia.org/wiki/KISS_principle – lin

+0

Это рекомендуемое использование ключа ввода-https://en.wikipedia.org/wiki/Enter_key – lin

+0

Что вы пробовали? Пожалуйста, добавьте несколько кодов. Вы знаете атрибут HTML 'tabindex'? https://www.w3schools.com/Tags/att_global_tabindex.asp – lin

ответ

1

Это проблема CSS, а не проблема с JavaScript. HTML по умолчанию сворачивает пустое пространство - это включает в себя игнорирование новых строк.

Добавить white-space: pre-wrap в выходной div.

Ниже приведен пример кода:

{ 
white-space: pre-wrap 
} 
0

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

+0

Отлично, и он также работает с TAB как функция автофокуса. Это будет работать, пока пользователь не заполнит текстовое поле и не попытается сделать паузу внутри текста. – lin

+3

Вы должны пометить его как дубликат, а не копировать/вставлять существующий ответ. – Mistalis

4

CODEPEN полезно, если вы используете JQuery

в вашем JavaScript попробовать это (ссылка ваше текстовое поле по имени и/или идентификатор)

Это заменяет все (r/n) с разрывами строк HTML (br)

Код ссылки: JavaScript: How to add line breaks to an HTML textarea?

+0

Почему нужно использовать сложный JS, если простой CSS может решить его для нас? – Star

1

использование JQuery событий клавиатуры

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