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

【问题标题】：Copying text of textarea into div with line breaks将textarea的文本复制到带有换行符的div中
【发布时间】：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吗？
任何答案对您有帮助吗？如果是这样，请检查它以完成此问题。

标签： javascript jquery html textarea

【解决方案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
        
    });

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;textarea name="mas" rows="15" class="content"&gt;&lt;/textarea&gt; &lt;p&gt;&amp;nbsp;&lt;/p&gt; &lt;div class="mas" &gt;Texts Comes here&lt;/div&gt;

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

【讨论】：