свойство значения textarea игнорирует разрывы строк и пробелы при чтении его с помощью JavaScript

Question

Я работаю над небольшим приложением для ноутбука, которое работает в браузере, моя проблема в том, что если я наберу заметку так:

* привет

это моя первая заметка

приложение показывает это так:

привет, это моя первая заметка

Я также хочу, чтобы элементы с идентификаторами header и footer отображались даже при прокрутке вниз или вверх (что-то вроде установки фиксированного положения, но у меня это не работает).

вот ссылка на проект, чтобы посмотреть коды и попробовать. Codepen

Answer 1

вы должны заменить разрывы строк и пробелы на html вроде

note.value.replace(/\n/g, '<br>\n').replace(/\s/g,'&nbsp;'); 

и добавьте его к innerHTML <li> вместо создания текстового узла.

li.innerHTML = show;

Взгляните на мой пример:

const main = document.getElementById("main");
const add = document.getElementById("add"); //new note
const submit = document.getElementById("submit"); //submit the new note
const cancel = document.getElementById("cancel");
const screen = document.getElementById("screen");
const ul = document.getElementById("list");
const del = document.getElementById("delete");
const note = document.getElementById("note");
const back = document.getElementById("back");

let mynotes = {};
let i = 0;

add.addEventListener('click', function() {
  main.style.display = "block";
  submit.style.display = "inline";
  cancel.style.display = "inline";
  add.style.display = "none";
  screen.style.display = "none";
  del.style.display = "none";
  back.style.display = "none";
});

submit.addEventListener('click', function() {
  if (note.value) {
    newNote = note.value.replace(/\n/g, '<br>\n').replace(/\s/g,'&nbsp;');
    if (newNote.length > 50) {
      show = newNote.substring(0, 46) + "...";
    } else {
      show = newNote;
    }

    if (mynotes.hasOwnProperty(show)) {
      show = show + `${++i}`;
    }

    mynotes[show] = newNote;

    var li = document.createElement("li");
    li.setAttribute('class', 'item');
    li.innerHTML = show;
    ul.appendChild(li);
    note.value = "";
  } else {
    alert("can't add empty note");
  }

  main.style.display = "none";
  screen.style.display = "block";
  submit.style.display = "none";
  cancel.style.display = "none";
  add.style.display = "inline";
  del.style.display = "none";
  back.style.display = "none";
});

ul.addEventListener('click', function(event) {
  node = event.target;
  item = event.target.innerHTML;
  text.innerHTML = mynotes[item];
  fullnote.style.display = "block";
  main.style.display = "none";
  submit.style.display = "none";
  add.style.display = "none";
  screen.style.display = "none";
  cancel.style.display = "none";
  del.style.display = "inline";
  back.style.display = "inline";
});

del.addEventListener('click', function() {
  ul.removeChild(node);
  delete mynotes[item];
  main.style.display = "none";
  screen.style.display = "block";
  submit.style.display = "none";
  add.style.display = "inline";
  fullnote.style.display = "none";
  back.style.display = "none";
  del.style.display = "none";
});

cancel.addEventListener('click', function() {
  note.value = "";
  main.style.display = "none";
  screen.style.display = "block";
  submit.style.display = "none";
  add.style.display = "inline";
  fullnote.style.display = "none";
  del.style.display = "none";
  back.style.display = "none";
  cancel.style.display = "none";
})

back.addEventListener('click', function() {
  main.style.display = "none";
  screen.style.display = "block";
  submit.style.display = "none";
  add.style.display = "inline";
  fullnote.style.display = "none";
  back.style.display = "none";
  del.style.display = "none";
});

#container {
  background-color: rgb(253, 248, 177);
}

#header,
#footer {
  z-index: 2;
}

#title {
  color: white;
  padding-top: 7px;
}

#cancel,
#submit,
#back {
  color: white;
  font-size: 20px;
}

#add {
  font-size: 20px;
}

#delete,
#cancel,
#submit {
  display: none;
}

#main {
  display: none;
}

#note {
  resize: none;
}

#fullnote {
  display: none;
}

#back {
  display: none;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



<div class="container min-vh-100 d-flex flex-column" id="container">

  <!-- header -->
  <div class="row align-items-start bg-info" id="header">
    <div class="col text-center">
      <button type="button" class="btn" id="cancel">&#10007;</button>
      <button type="button" class="btn" id="back">&#8617;</button>
    </div>
    <div class="col text-center">
      <h4 id="title">Notebook</h4>
    </div>
    <div class="col text-center">
      <button type="button" class="btn" id="submit">&#10004;</button>
    </div>
  </div>

  <br />

  <!-- Screen list show -->
  <div class="row" id="screen">
    <div class="col-12">
      <ul id="list">

      </ul>
    </div>
  </div>

  <!-- Note show -->
  <div class="row" id="fullnote">
    <div class="col-12">
      <p id="text">
      </p>
    </div>
  </div>


  <!-- textarea -->
  <div class="row flex-grow-1">
    <div class="col" id="main">
      <textarea class="form-control textarea h-100" value="" placeholder="write note" id="note"></textarea>
    </div>
  </div>


  <!-- footer -->
  <div class="row align-items-end" id="footer">
    <div class="col d-flex justify-content-start" style="padding: 10px; padding-left: 25px;">
      <button id="add" class="btn btn-info rounded-circle"><h4 style="padding: 0px; margin: 0px;">&#x2b;</h4></button>
      <button id="delete" class="btn btn-info rounded-circle">&#128465;</button>
    </div>
  </div>

</div>

Answer 2

Вы должны либо преобразовать переводы строк в br:

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

Или вы можете сделать это с помощью css:

.text, .item {
    white-space: pre-wrap;
}