Copier du texte de textarea dans div avec des sauts de ligne

Je suis attachant à faire un simple effet à l'aide de keyup() en jQuery. Je veux juste que lorsque l'utilisateur dans le textarea ensuite le texte sur lequel l'utilisateur types de copie à une autre div nommé .content. Lorsque j'appuie sur entrée dans le textarea une nouvelle ligne est créée, mais dans mon div, le texte s'affiche dans la même ligne. Mon code est ci-dessous ou vous pouvez voir la démo ici: http://jsfiddle.net/Pqygp/

HTML

<textarea name="mas" rows="15" class="content"></textarea>
<p>&nbsp;</p>
<div class="mas" >Texts Comes here</div>

SCRIPT

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

    $('.'+contentAttr+'').html(value);
})

source d'informationauteur Kamal

  1. 13

    Vous avez besoin de convertir le littéral des retours à la ligne dans <br> balises pour une bonne sortie dans le DIV.

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

    Indiqué dans le code ci-dessous:

    $('.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

});

    JSFiddle

  2. 29

    Ajouter un white-space: pre-wrap la règle de la div en CSS. 

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

    Démo: http://jsfiddle.net/Pqygp/13/

  3. 5

    Utiliser cette ligne: Violon

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

    Le problème est que les retours à la ligne ne créez pas de retours à la ligne (en html, mais <br> volonté.

  4. 1

    Essayer comme

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

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

    C'est le DÉMO

  5. 0

    Si vous utilisez Réagir:

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