弹出窗口有奇怪的文字答案

【问题标题】：Popup window has strange text弹出窗口有奇怪的文字
【发布时间】：2021-02-19 22:23:35
【问题描述】：

我有一个有 2 个单元格的表格；一个有数据，另一个没有。我想为用户提供一种通过隐藏的 div“TextEditor”编辑该数据的方法。

function editText(textID) {
  var cText = document.getElementById(textID).innerHTML;
  document.getElementById('editBox').innerHTML = cText;
  toggleHide('TextEditor');
}

function toggleHide(id) {
  var x = document.getElementById(id);
  x.style.display = x.style.display === "none" ? "block" : "none";
}

#testTable td {
  width: 50px;
  height: 50px;
  border: black solid 1px;
}

#TextEditor {
  width: 200px;
  height: 100px;
  background-color: blue;
  display: none;
  left: 300px;
  margin-top: 30px;
}

#editBox {
  width: 95%;
  height: 95%;
}

<table id="testTable" border="1px">
  <tr>
    <th>Note 1</th>
    <th>Note 2</th>
  </tr>
  <tr>
    <td onclick="editText('text1')">
      <div id="text1"></div>
    </td>
    <td onclick="editText('text2')">
      <div id="text2">abcdefghijk</div>
    </td>
  </tr>
</table>
<div id="TextEditor">
  <textarea id="editBox" name="editBox"></textarea>
  <input type="button" value="Cancel" onclick="toggleHide('TextEditor')" />
</div>

在表格单元格内单击会显示 TextEditor div，其中包含单元格的文本，可供编辑。尝试点击第二个单元格来查看。

单击“取消”关闭第一个弹出窗口，即单击第一个单元格。键入一些乱码，例如“adsadg”，然后单击“取消”。现在单击单元格#2 - 带有文本和文本的单元格丢失但显示乱码。单步执行代码显示单元格 2 的文本已被清楚地检索和保存，但只有乱码显示。我做错了什么？

【问题讨论】：

标签： javascript html textarea

【解决方案1】：

解决方案是将.value 用于textarea 而不是.innerHTML，因为它是一个表单元素。我测试了它，它确实解决了这个问题。然后你的 javascript 就变成了。

function editText(textID) {
  var cText = document.getElementById(textID).innerHTML;
  document.getElementById('editBox').value = cText; // <<<< VALUE!!
  toggleHide('TextEditor');
}

function toggleHide(id) {
  var x = document.getElementById(id);
  x.style.display = x.style.display === "none" ? "block" : "none";
}

此代码还有很多其他问题，例如切换，但这确实解决了您遇到的问题。

我找到了解决方案here。

【讨论】：

【解决方案2】：

我正在检查您的代码，但不确定目标是什么，但对其进行了一些更改：

const textAreaId = "editBox";
const textEditor = "TextEditor";
var editorOpened = false;
var activeCell = "text1";

function editText(textID) {
  // You change the cell id to update it later
  activeCell = textID;
  // Get the text from the cell
  const currentText = document.getElementById(textID).innerHTML || "";
  // Set the current text to the textarea
  document.getElementById(textAreaId).value = currentText;
  // Show the textarea to update the cell
  toggleHide("TextEditor");
}

function toggleHide() {
  editorOpened = !editorOpened;
  document.getElementById(textEditor).style.display = editorOpened
    ? "block"
    : "none";
}

function updateTableCell() {
  const inputText = document.getElementById(textAreaId).value;
  document.getElementById(activeCell).innerHTML = inputText;
}

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
      #testTable td {
        width: 50px;
        height: 50px;
        border: black solid 1px;
        cursor: pointer;
      }
      #TextEditor {
        width: 200px;
        height: 100px;
        background-color: blue;
        display: none;
        left: 300px;
        margin-top: 30px;
      }
      #editBox {
        width: 95%;
        height: 95%;
      }
    </style>
  </head>
  <body>
    <table id="testTable" border="1px">
      <tr>
        <th>Note 1</th>
        <th>Note 2</th>
      </tr>
      <tr>
        <td onclick="editText('text1')"><div id="text1"></div></td>
        <td onclick="editText('text2')"><div id="text2">abcdefghijk</div></td>
      </tr>
    </table>
    <div id="TextEditor">
      <textarea
        id="editBox"
        name="editBox"
        onkeyup="updateTableCell()"
      ></textarea>
      <input type="button" value="Close" onclick="toggleHide()" />
    </div>
    <script src="PageTest.js" type="text/javascript"></script>
  </body>
</html>

如果您愿意，可以查看它，如果您需要任何帮助，请告诉我。

【讨论】：

【解决方案3】：

我也试图找到解决您问题的方法并更改了您的代码中的一些内容：

//I made the variables global to be able to get both elements on both functions
var cText = document.getElementById("text2");
var text = document.getElementById('editBox');

//On this function it gets the text on the table cell and put it on the editBox
function editText(){
    text.innerText = cText.innerText
    toggleHide('TextEditor');
   }

//On this function when the cancel button is clicked the table cell receives the value on the 'editBox'
function toggleHide(id) {
    var x = document.getElementById(id);
     x.style.display = x.style.display === "none" ? "block" : "none";

     cText.innerText = text.value
}

【讨论】：