页面刷新后如何让input输入框恢复为默认初始值？

问题原因 #

浏览器默认自带表单值恢复机制，用户修改输入框内容后刷新页面时，浏览器会主动保留上次输入的内容，不会自动重置为HTML源码中声明的value默认值。

解决方案 #

你可以根据使用场景选以下任意一种方案实现：

• 方案1：添加autocomplete属性（最简单）
  直接给input标签添加autocomplete="off"属性，明确告知浏览器不要缓存、恢复该输入框的内容，修改后的代码如下：

  <body class="container-fluid">
  <input type="number" id="quantity" name="quantity" value="20" min="1" max="10000000" autocomplete="off">
  </body>
  

• 方案2：JS主动赋值（兼容性最强）
  如果部分浏览器对autocomplete="off"支持不好，可以在页面DOM加载完成后，通过JS主动将输入框的值重置为默认值，代码如下：

  <body class="container-fluid">
  <input type="number" id="quantity" name="quantity" value="20" min="1" max="10000000">
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 直接设置为你需要的默认值即可
      document.getElementById('quantity').value = 20;
    })
  </script>
  </body>
  

• 方案3：表单reset方法（适合多输入框场景）
  如果你有多个输入框需要统一重置为默认值，可以将输入框套在form标签内，加载时调用form的reset方法：

  <body class="container-fluid">
  <form id="myForm">
    <input type="number" id="quantity" name="quantity" value="20" min="1" max="10000000">
    <!-- 其他需要重置的输入框可放在此处 -->
  </form>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('myForm').reset();
    })
  </script>
  </body>
  

内容的提问来源于stack exchange，提问作者aloea