Question

我一直在开发一个可在浏览器上使用的小型笔记本应用程序，我的问题是，如果我输入这样的注释：

*你好

这是我的第一个音符

应用显示如下：

你好，这是我的第一个音符

即使在我上下滚动时，我也希望显示ID为header和footer的元素（类似于将posiotion设置为fixed，但这对我不起作用）。 / p>

这是指向项目的链接，以查看代码并进行尝试。 Codepen

Answer 1

您必须用html之类的字符替换换行符和空格

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

并将其添加到innerHTML的{{1}}中，而不是创建一个textnode。

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

Answer 2

您要么必须将换行符转换为br的换行符：

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

或者您可以使用CSS执行此操作：

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

使用javascript读取时，textarea值属性会忽略换行符和空格

2 个答案: