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

Posted 2023-05-07

【中文标题】将textarea的文本复制到带有换行符的div中

【英文标题】：Copying text of textarea into div with line breaks

【发布时间】：2013-08-11 07:49:46

【问题描述】：

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

【问题讨论】：

你想用javascript来替换jQuery吗？

任何答案对您有帮助吗？如果是这样，请检查它以完成此问题。

【参考方案1】：

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

.mas 
    white-space: pre-wrap;

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

【讨论】：

请注意只有 IE 8 和更高版本支持这个属性。根据MDN reference，您可以使用属性 word-wrap: break-word; /* IE 5.5-7 */ white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */ white-space: pre-wrap; /* current browsers */ 使其与IE 6 一起使用

我更喜欢这个，因为它有几行，你可以使用 ´.text()´ 显示没有 html ´´ 参考。

这就是答案

【参考方案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> </p> <div class="mas" >Texts Comes here</div>

JSFiddle

【讨论】：

有安全的方法吗？这是毫无意义的。虽然它确实回答了这个问题，但我所要做的就是输入 ，它就会运行。所以对于用户输入来说，如果这个内容显示给多个用户有点危险

@user2330270 是的，只需使用.text() 而不是.html()

【参考方案3】：

使用此行：Fiddle

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

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

【参考方案4】：

试试看

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

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

这是DEMO

【参考方案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
    />
  );