Sao chép văn bản của vùng văn bản vào div có ngắt dòng

Question

Tôi đang buộc phải tạo hiệu ứng đơn giản bằng cách sử dụng keyup() trong jQuery. Tôi chỉ muốn rằng khi người dùng nhập vào số textarea thì văn bản mà loại người dùng sẽ sao chép sang một div khác có tên là .content. Khi tôi bấm , hãy nhập vào văn bản dòng mới được tạo nhưng trong div của tôi văn bản được hiển thị trong cùng một dòng. Mã của tôi là dưới đây hoặc bạn có thể xem demo ở đây: 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); 
}) 

Answer 1

Bạn cần phải chuyển đổi dòng mới thành <br> thẻ cho đầu ra phù hợp trong DIV.

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

Thể hiện trong mã của bạn dưới đây:

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

Answer 2

Sử dụng dòng này: Fiddle

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

Vấn đề là các dòng mới không tạo ra dấu ngắt dòng trong html, nhưng <br> sẽ.

Answer 3

Hãy thử như

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

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

Đây là DEMO

Answer 4

Thêm một white-space: pre-wrap quy tắc đối với CSS của div.

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

Demo: http://jsfiddle.net/Pqygp/13/

Answer 5

Nếu bạn sử dụng Phản ứng:

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