用换行符将textarea的文本复制到div中 [英] Copying text of textarea into div with line breaks

问题描述

我在jQuery中使用 keyup（）来设置一个简单的效果。我只想当用户键入到 textarea 时，那么用户类型将复制到另一个名为 .content 。当我在textarea中按输入时，会创建一个新行，但在我的div中，文本显示在同一行中。我的代码如下，或者你可以在这里看到演示： http://jsfiddle.net/Pqygp/

HTML

 < textarea name = masrows =15class =content>< / textarea> 
< p>& nbsp;< / p> 
< div class =mas>文字出现在这里< / div> 
  

SCRIPT
< pre $ $（'。content：not（.focus）'）。keyup（function（）{
var value = $（this）.val（）;
var contentAttr = $（this）.attr（'name'）;

$（'。'+ contentAttr +''）。html（value）;
}）





解决方案

您需要将字面换行符转换为< ; br> 标签在DIV中输出正确。

  $（'。'+ contentAttr +' '）的.html（？value.replace（/ \r \\\
 /克，' <峰; br />'））; 
  

显示在您的代码中：

<$ p $（）。code $（'。content：not（.focus）'）。keyup（function（）{


var value = $（this）.val （）;
var contentAttr = $（this）.attr（'name'）;

'（'。'+ contentAttr +''）。html（value.replace（/ \ r？\\\
/ g，'< br />'））; //将换行符转换为< br>标记

}）;


JSFiddle

I am tying to make a simple effect using keyup() in jQuery. I just want that when user types into the textarea then the text which user types will copy to another div named .content. When I press enter in textarea a new line is created but in my div the text is showing in the same line. My code is below or you can see demo here: 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);
})

解决方案

You need to convert the literal newlines into <br> tags for proper output in the DIV.

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

Shown in your code below:

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

这篇关于用换行符将textarea的文本复制到div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！