Как вставить новую строку на этикетке при нажатии введите в поле ввода

Question

Я динамически изменяю значение текста (destinationtext), используя ввод с javascript. Это многострочный ввод. Но я не могу добавить новую строку в целевой текст, когда я нажимаю ввод. Как я могу это сделать?

Это стиль div

  .destinationtext {
        position: absolute;
        top: 0px;
        left: 289px;
        width: 233px;
        height: 122px;
        line-height: 122px;
        z-index: 13;
        text-align: center;
        font-family: Hind;
        font-size: 16px;
        vertical-align: middle;
        color: white;
        margin: 5px 5px 5px 5px;
        padding-left: 10px;
        padding-right: 10px;
    }

Я использую этот простой код для изменения значений

  $(function () {
        $('#sourceinput').keyup(function () {
            $('#destinationtext').text($(this).val());
        });
    });

Моя проблема в основном выглядит следующим образом:

Answer 1

Если вы хотите видеть разрывы строк в элементе span, вам нужно изменить символ новой строки из ввода в тег <br>. Что-то вроде:

$('#sourceinput').keyup(function () {
    $('#destinationtext').html($(this).val().replace(/\n/g, '<br>'));
});

Обратите внимание, что я использую .html() вместо .text(), потому что .text() будет кодировать HTML теги. Основное отличие состоит в том, что .html() заменит любой другой контент HTML, который может быть в промежутке.

Answer 2

Я думаю, вам просто нужно применить стиль к div

#destinationtext {
   white-space: pre-wrap;
}