切换文本区域文本，但保留对文本的更改

Question

我正在尝试使用复选框来禁用和启用文本区域，同时切换框中的文本。我唯一的问题是我无法保留启用文本区域时所做的更改。 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>

Answer 1

如果我没理解错的话，你不能把文本存储在变量中吗？

Answer 2

您不需要在每次选中或取消选中复选框时都从 textarea 中读取值并将其存储到变量中。您也不需要（或应该）在 javascript 中设置 textarea 的初始值。在 HTML 中设置初始 textarea 内容，然后使用 javascript 将事件侦听器附加到复选框，该复选框将 add/remove 来自元素的 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 变量添加到复选框 disable/enable 上的 store/restore txtBox 值

切换文本区域文本，但保留对文本的更改

Toggle textarea text, but retain changes to the text

javascript

textarea

toggle