如何在 textarea 中显示断线和从 JavaScript 到我的 textarea 内部文本的数据提取

Question

I want to get data from user in <textarea> and show it on the DOM page with edit button and with breaklines if user click on edit user old data send to new <textarea> with breaklines

Adding an item.

<form name="add" method="POST" action="{% url 'notepad:addnote' %}">{% csrf_token %}
<div class="modal-body">
    Title : <input name="title" class="w-50" type="text" required><br>
    Note :<br>
    <textarea  name="text" id="" cols="60" rows="10" required></textarea>
</div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary">Save</button>
</div>

Showing an items.

    <div id="content">
       {% for items in allitems %}
          <ul class="list-group d-inline-block my-4 ">
          <li class="list-group-item list-group-item-info  list-group-item-action {{items.id}}" aria-current="true">{{items.title}}<button onclick="editContent({{items.id}})" data-bs-toggle="modal" data-bs-target="#update"  type="button" class="save mx-2"><i class="fa fa-pencil-square-o"></i></button></li>
          <li class="list-group-item list-group-item-action {{items.id}}">{{items.text}}</li>
          </ul>
       {% endfor %}
   </div>

But if i show an items it removes break lines. So I'll try pre tag to show that content with breaklines.

<div id="content"> 
 {% for items in allitems %}
     <ul class="list-group d-inline-block my-4 ">
       <li class="list-group-item list-group-item-info  list-group-item-action {{items.id}}" aria-current="true">{{items.title}}<button onclick="editContent({{items.id}})" data-bs-toggle="modal" data-bs-target="#update"  type="button" class="save mx-2"><i class="fa fa-pencil-square-o"></i></button></li>
       <pre><li class="list-group-item list-group-item-action {{items.id}}">{{items.text}}</li></pre>
     </ul>
 {% endfor %}
</div>

It shows break lines, but i again want to edit and send this content to my input and textarea to edit that's content, So i do that with JavaScript. And my place that i want to get data is

<div class="modal-body">
 Title : <input name="title" class="w-50" type="text" id="update_title" required value=""><br>
 Note :<br>
 <textarea name="text" cols="60" rows="10" id="update_text" required></textarea>

My JavaScript code is

function editContent(cls){
content = document.getElementsByClassName(`${cls}`);
oldtitle = content[0].innerText;
editeTitlePlace = document.getElementById('update_title');
editeTitlePlace.value = oldtitle

editTextPlace = document.getElementById('update_text');
oldtext = content[1].innerText;
newstr = ""

for(i=0;i < oldtext.length ;){
 char = oldtext.charAt(i);
 if (char == "\n"){
   newstr += " ";
  }
  else{
    newstr += char;
  }
  i++;
}
editeTextPlace.innerText = newstr
}

It shows my content,and replace "\n" with " " but if i do to add "\n" or "\n\t" it again shows me spaces not breaks a line in textarea. But i want that it shows me breakline in textarea.

Answer 1

Add white-space: pre-wrap styling to the place you are showing the items. This is preserve line breaks if they are found in textarea .

Your code should look something like this.

 <div id="content" style="white-space: pre-wrap;">
       {% for items in allitems %}
          <ul class="list-group d-inline-block my-4 ">
          <li class="list-group-item list-group-item-info  list-group-item-action {{items.id}}" aria-current="true">{{items.title}}<button onclick="editContent({{items.id}})" data-bs-toggle="modal" data-bs-target="#update"  type="button" class="save mx-2"><i class="fa fa-pencil-square-o"></i></button></li>
          <li class="list-group-item list-group-item-action {{items.id}}">{{items.text}}</li>
          </ul>
       {% endfor %}
   </div>

NOTE: You can add the mentioned css tag where needed.

Answer 2

In my JavaScript While i using for loop i choose \n to replace with <br> in forloop and newstr add as <textarea> innerHTML and my <br> will change into break line in <textarea>

function editContent(cls){
content = document.getElementsByClassName(`${cls}`);
oldtitle = content[0].innerText;
editeTitlePlace = document.getElementById('update_title');
editeTitlePlace.value = oldtitle

editTextPlace = document.getElementById('update_text');
oldtext = content[1].innerText;
newstr = ""

for(i=0;i < oldtext.length ;){
 char = oldtext.charAt(i);
 if (char == "\n"){
   newstr += " ";
  }
  else{
    newstr += char;
  }
  i++;
}
editeTextPlace.innerHTML = newstr
}