Копирование текста textarea в div с разрывами строк

Я пытаюсь сделать простой эффект, используя keyup() в jQuery. Я просто хочу, что, когда пользователь вводит в textarea, то текст, который пользователь будет скопировать на другой DIV имени .content. Когда я нажимаю enter в текстовой области, создается новая строка, но в моем div текст отображается в той же строке. Мой код ниже или вы можете увидеть демо здесь: http://jsfiddle.net/Pqygp/

    $('.content:not(.focus)').keyup(function(){					
        var value = $(this).val();
        var contentAttr = $(this).attr('name');
        
        $('.'+contentAttr+'').html(value);
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea name="mas" rows="15" class="content"></textarea>
    <p>&nbsp;</p>
    <div class="mas" >Texts Comes here</div>

Ответы

Ответ 1

Вам нужно преобразовать буквальные символы новой строки в теги <br> для правильного вывода в DIV.

$('.'+contentAttr+'').html(value.replace(/\r?\n/g,'<br/>'));

Показано в вашем коде ниже:

    $('.content:not(.focus)').keyup(function(){					
                                    
                                    
        var value = $(this).val();
        var contentAttr = $(this).attr('name');
        
        $('.'+contentAttr+'').html(value.replace(/\r?\n/g,'<br/>')); //convert newlines into <br> tags
        
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea name="mas" rows="15" class="content"></textarea> <p>&nbsp;</p> <div class="mas" >Texts Comes here</div>

Ответ 2

Добавьте правило white-space: pre-wrap в div CSS.

.mas {
    white-space: pre-wrap;
}

Демо: http://jsfiddle.net/Pqygp/13/

Ответ 3

Используйте эту строку: Fiddle

$('.'+contentAttr+'').html(value.replace(/\n/g,"<br>"));

Проблема заключалась в том, что новые строки не создают строки в html, но <br> будут.

Ответ 4

Попробуйте

var value = $(this).();
var contentAttr = $(this).attr('name');

$('.'+contentAttr+'').html(value.replace(/\r?\n/g,"<br>"));

Это DEMO

Ответ 5

Если вы используете React:

render() {
  const nbOfTextareaRows = this.state.textareaValue.split('\n').length;

  return (
    <textarea
      value={this.state.textareaValue}
      onChange={e => this.setState({ textareaValue: e.target.value })}
      rows={nbOfTextareaRows}
    />
  );
}