textarea的javascript内部文本不会重置重新加载页面

Question

我有以下代码，在加载页面时可以完美运行

它允许双击 P 并使其可使用文本区域进行编辑，并在单击“保存”按钮时将其恢复为 P

双击“some lorem ipsum”字符串会将P切换到一个texarea，其内容取自P内容，因此它将显示“some lorem ipsum ”

您进行了一些编辑，假设您删除了“一些 lorem ipsum”，并且现在编写了“已编辑的新内容”，

当您单击“保存”时，它会返回向 P 显示哪些新内容现在是“新内容已编辑”

我遇到的问题是，如果我单击 Firefox 中的重新加载按钮，

P 返回原始内容“some lorem ipsum”

但是如果我双击“some lorem ipsum”字符串，则文本区域文本不会从 P 中选取

相反，它显示之前的“编辑的新内容”

我是不是忘记了什么？谢谢指点

var noteP = document.getElementById("noteP");
var noteTA = document.getElementById("noteTA");
var noteDD = document.getElementById("noteDD");
var noteED = document.getElementById("noteED");

var TestoOriginale = "";
var TestoAttuale = "";

noteED.style.display = "none";

noteP.ondblclick = function LoadText() {
  TestoOriginale = noteP.innerText;  // load the P text
  noteTA.innerText = TestoOriginale; // -THE ERROR IS HERE- write the P text into the textarea
  noteDD.style.display = "none"; // hide P DIV
  noteED.style.display = "block"; // show text area DIV
}


function UpdateText() {
  TestoAttuale = noteTA.value; // get current textarea text
  noteP.innerText = TestoAttuale; // write it into P
  noteDD.style.display = "block";
  noteED.style.display = "none";

}


document.getElementById("salvaBT").onclick = function AJAXPost(NoteUpdateForm) {

  UpdateText();

  /**
  more code later
  **/
}

<div id="noteDD">
  <p id="noteP">some lorem ipsum</span>.</p>
</div>

<div id="noteED">
  <form action="./note-update.php" method="post" id="NoteUpdateForm">
    <textarea id="noteTA" name="NoteUpdateText" form="NoteUpdateForm" rows="5" cols="40"></textarea><br>
  </form>
  <input type="button" value="Cancel"><input type="button" id="salvaBT" value="Save" onclick="javascript:AJAXPost(this);">
</div>

Answer 1

据我了解，在事件发生后，您想在保存更改后更新 textarea 值。

您需要通过value至textarea保存修改。

而不是做

noteTA.innerText = TestoOriginale;

做:

noteTA.value = TestoOriginale;

当您使用innerText时您将文本放入 <textarea> 中HTML 选择器而不是将其放入文本区域 value属性。