javascript - 将textarea的文本复制到带有换行符的div中

Question

我想keyup()在 jQuery 中使用一个简单的效果。我只希望当用户输入时，用户输入textarea的文本将复制到另一个名为 的 div.content中。当我在 textarea 中按下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>

Answer 1

white-space: pre-wrap向 div 的 CSS添加规则。

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

演示：http: //jsfiddle.net/Pqygp/13/

Answer 2

您需要将文字换行符转换为<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>

JSFiddle

Answer 3

使用这条线：小提琴

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

问题是换行符不会在 html 中创建换行符，但<br>会。

Answer 4

试试喜欢

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

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

这是演示

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