表单提交后textarea内容被清空，如何保留用户输入的文本？

• 表单默认的提交行为会触发页面刷新/跳转，页面重新加载后textarea内的用户输入内容会自动重置清空
• 你绑定的fill函数没有阻止表单的默认提交逻辑，点击提交按钮后表单仍会正常发起提交
• 你的代码存在三处语法错误：
  • textarea标签被写在了HTML注释块<!-- -->内，页面不会渲染该输入框，需要删掉注释符号
  • textarea是双标签，不能使用<textarea />的自闭合写法，必须写为<textarea></textarea>
  • 提交按钮多写了一个多余的</button>闭合标签

场景1：不需要提交数据到后端，仅前端处理输入内容 #

直接在fill函数末尾返回false，阻止表单默认提交行为即可，修改后的完整代码如下：

<form action="/search" name="myform" id="formid" method="post">
  <div class="input-group">
    <textarea name="input" id="textArea"></textarea>
    <button type="submit" onclick="return fill()">Search</button>
  </div>
</form>
<div id="demo"></div>

<script type="text/javascript">
function fill() {
  var x = document.getElementById('textArea').value;
  document.getElementById('demo').innerHTML = x;
  // 新增：阻止表单默认提交行为
  return false;
}
</script>

场景2：需要提交数据到后端 #

方案A：使用AJAX异步提交，不刷新页面 #

通过JS发起异步请求提交数据，页面不会刷新，textarea内容自然保留，代码示例：

function fill() {
  var x = document.getElementById('textArea').value;
  document.getElementById('demo').innerHTML = x;
  
  // 异步提交表单
  fetch('/search', {
    method: 'POST',
    body: new FormData(document.getElementById('formid'))
  }).then(res => {
    // 自行处理后端返回结果
  })
  
  return false;
}

方案B：正常提交页面，后端回填内容 #

后端接收提交的参数后，在返回的页面中把用户提交的内容写到textarea标签内即可，示例：

<textarea name="input" id="textArea">此处填入用户之前提交的内容</textarea>

内容的提问来源于stack exchange，提问作者dave-16