切换 textarea 文本，但保留对文本的更改答案

【问题标题】：Toggle textarea text, but retain changes to the text切换 textarea 文本，但保留对文本的更改
【发布时间】：2016-01-25 01:22:41
【问题描述】：

我正在尝试使用复选框来禁用和启用文本区域，同时切换框中的文本。我唯一的问题是我无法保留启用 textarea 时所做的更改。 textarea 最初被禁用并保存初始文本。启用 textarea 后，文本变为可编辑。如果重新选中该复选框，则更改会消失并且原始文本会重新出现——向后切换会删除更改（这不是我想要的）。我想来回切换文本，但不删除更改。我相信最好的方法是保留变量中的变化？我复制了下面的代码：

 function toggleDisabled(_checked) {
document.getElementById('tjh').disabled = _checked ? true : false;
document.getElementById('tjh').value= "initial text";
}

    <form>
    <input type="checkbox" checked name="name1"     onchange="toggleDisabled(this.checked)"/>
<textarea disabled name="name2" id="tjh">initial text</textarea>
</form>

【问题讨论】：

为什么要在这个过程中改变值？
如果他们决定，他们必须能够回到原来的文本。

标签： javascript textarea toggle

【解决方案1】：

您无需在每次选中或取消选中复选框时从textarea 读取值并将其存储到变量中。您也不需要（或不应该）在您的 javascript 中设置 textarea 的初始值。在 HTML 中设置初始 textarea 内容，然后使用 javascript 将事件侦听器附加到复选框，该复选框将根据是否选中从元素中添加/删除 disabled 属性。

您可以在 HTML 元素上使用 onChange 属性并像原来一样传入一个 javascript 函数，但 IMO 这样做不必要地将 HTML 和 Javascript 耦合在一起；使更改和阅读变得更加困难。

<form>
  <input type="checkbox" checked name="name1" id='name1' />
  <textarea disabled name="name2" id="tjh">Initial text</textarea>
</form>



<script type='text/javascript'>
  
  // Grab HTML elements by element's id
  var txtBox = document.getElementById('tjh');
  var checkBox = document.getElementById('name1');
  var customText = 'initial text';

  // Attach event listener to checkbox
  checkBox.addEventListener('click', function(evt, el) {

    // If checked, then save current textarea value and disable textarea
    if (evt.target.checked) {
      customText = txtBox.value;
      txtBox.value = 'initial text';
      txtBox.setAttribute('disabled', evt.target.checked);
    }

    // Otherwise restore text and reenable the textarea by removing disabled attribute from HTML element
    else {
      txtBox.value = customText ;
      txtBox.removeAttribute('disabled');
    }
  }, false)
</script>

编辑：添加 customText 变量以在禁用/启用复选框时存储/恢复 txtBox 值

【讨论】：

谢谢詹姆斯，我刚刚运行了这个，这可能是我可以解决的问题。需要重新选中该框并再次获取初始文本。再次取消选中应该会显示已编辑的文本？
如果您尝试在禁用textarea 时显示“初始文本”文本，然后在再次启用textarea 时恢复编辑的文本，您可以在checkBox 变量下声明一个变量（称它为customText）然后在if-else 语句中写入if (checked) { customText = txtBox.value; txtBox.value = "initial text" } else { txtBox.value = customText; }
你能更新你的代码吗，我相信它会工作，然后我可以将它标记为答案。谢谢，如果你有答案，我不想跳过。
我更新了代码，禁用复选框将恢复更改的textarea 值，启用复选框将恢复初始值
非常感谢，如果您有兴趣再回答一个问题：我有 20 个 textarea 框需要编写代码... getElementById 是唯一的方法，或者我可以改为定位类名。 getElementByClassName 似乎不起作用。

【解决方案2】：

如果我理解正确，您不能将文本存储在变量中吗？

【讨论】：

我将其发布为答案，因为我无法通过评论这样做。
我明白了。考虑到我在这一步遇到的麻烦，我想我需要帮助。任何示例都将推动正确的道路。
由于我不经常使用 JS（我只知道逻辑），我认为您可以创建一个变量“textStorage”。单击复选框时（是否有事件？）将 textStorage 设置为等于 textBox.getText 或类似的东西。