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

Toggle textarea text, but retain changes to the text

本文关键字：文本 保留 区域      更新时间：2023-09-26

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

 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>

您无需在每次选中或取消选中复选框时从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>

编辑：添加了自定义文本变量以在禁用/启用复选框时存储/恢复txtBox值

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

相关文章：