html文本区域中的新行

大家好，我在django项目的html中有一个表单。我希望用户可以输入一个文本，当他们按enter键或粘贴带有空行的文本时，他们应该显示出来。例如，如果输入：

你好

我叫艾伦

他们不应该看到

你好，我叫艾伦

但是，在我的代码中，文本显示为错误的示例。 这是我的html文件。提前谢谢

html

{%extends“base.html”%}
{%block content%}
$（文档）.ready（函数（）{
var text_max=10000；
$（'textarea'u feedback'）.html（text_max+'karkter hakkın kaldı'）；
$（'#textarea'）.keyup（函数（）{
var text_length=$（'#textarea'）.val（）.length；
var text_剩余=text_最大值-text_长度；
$（“#textarea_feedback”）.html（text_remaining+“karkter hakkın kaldı”）；
});
});


{{post.post}
{{{post.created_on}
约伦






{commentmodel_列表%中的i的%s}
{{i.comment}}
{%if i.author_security==user%}
{%endif%}
{%如果i.author为none%}
Anonim{{i.created{u on}

{%else%}
{{i.created_on}
{%endif%}



{%endfor%}
{%if user.u是否经过身份验证%}
{%csrf_令牌%}
约伦：






Anonim olarak yorum atmak için Tıkla！
佩拉什
卡帕特
{%else%}
yapmalısın的Yorum atmak iç

{%endif%}
$（'#textarea'）。按键（功能（e）{
如果（e.keyCode==13）{
e、 预防默认值（）；
this.value=this.value.substring（0，this.selectionStart）+++“\n”+this.value.substring（this.selectionEnd，this.value.length）；
}
});
{%endblock内容%}

您应该使用换行符标记

{{var_name | linebreaks}

{% extends "base.html" %}
{%block content%}
<script>
  $(document).ready(function() {
    var text_max = 10000;
    $('#textarea_feedback').html(text_max + ' karakter hakkın kaldı.');

    $('#textarea').keyup(function() {
        var text_length = $('#textarea').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' karakter hakkın kaldı.');
    });
});
</script>
<div class="container">
<br>
<h1 style="text-align:center;">{{post.post}} </h1>
<p style="font-size:small;text-align:center;">{{post.created_on}}</p>
<button type="button" class="btn btn-secondary float-right" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Yorum At</button>
<br>
<br>
<br>
{% for i in commentmodel_list%}
<h4 >{{i.comment}}</h4>
{% if i.author_security == user%}
<a style="float:right;color:red;" href="{% url 'forum:delete' slug=post.slug comment_id=i.id %}?next={{ request.path }}" ><i class="fas fa-minus-circle"></i></a>
{% endif %}
{% if i.author is none %}
<p style="font-size:small;">Anonim | {{i.created_on}}</p>
{% else%}
<p style="font-size:small;"><a style="text-decoration:none;" href="#">@{{i.author}}</a> | {{i.created_on}}</p>
{% endif %}

<hr>
<br>
{% endfor %}
</div>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
     <div class="modal-content">
         <div class="modal-body">
       {%if user.is_authenticated%}
             <form method="post" style="margin-top: 1.3em;">
                 {% csrf_token %}
         <label for="comment">Yorum:</label>
         <br>
         <textarea id="textarea" maxlength="10000"name="comment" rows="8" cols="50"></textarea>
         <div id="textarea_feedback"></div>
                 <br>
                 <br>
                 <input type="checkbox" name="anonn" id="anonn">
                 <label for="anonn">Anonim olarak yorum atmak için Tıkla!</label>
                 <div class="modal-footer">
                     <button type="submit" class="btn btn-primary">Paylaş</button>
                     <button type="submit" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
                 </div>
             </form>
       {%else%}
       <p style="text-align:center;">Yorum atmak için <a style="text-decoration:none;color:blue;" href="{% url 'account:login' %}?next={{ request.path }}">Giriş</a> yapmalısın.</p>
       {% endif %}
         </div>
     </div>
 </div>
</div>

<script>
  $('#textarea').keypress(function(e) {
  if (e.keyCode == 13) {
    e.preventDefault();
    this.value = this.value.substring(0, this.selectionStart) + "" + "\n" + this.value.substring(this.selectionEnd, this.value.length);
  }
});
</script>



{% endblock content%}

<div>{{ var_name|linebreaks }}</div>