使用换行符将textarea的文本复制到div中

Question

我想keyup()在jQuery中使用简单的效果.我只是希望当用户键入textarea当时用户类型将复制到另一个div的文本.content.当我按下entertextarea时会创建一个新行,但在我的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>会出现.