Question

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

Answer 1

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

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

＆＃13;

<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>

＆＃13;

编辑：添加了customText变量以在禁用/启用复选框

时存储/恢复txtBox值

Answer 2

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

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

2 个答案: