时间戳

首页 > 解决方案 > 如何在html表单中排除少数输入

javascript - 如何在html表单中排除少数输入

问题描述

有一个带有 2 个输入的表单和一个用于重置输入的按钮。单击按钮时，如何使第一个输入保持不变（即它不应该重置值）。我怎样才能实现它？

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>Add-More example - fileuploader - Innostudio.de</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"></script>
    </head>

    <body>
        <div class="file-loading" style="margin: 50px;">
            <form>
                <input id="no_reset" type="text">
                <input id="input-fa" type="text">
                <button type="reset" onclick="removeReset()">
                    <i class="fas fa-sync"></i>submit
                 </button>
            </form>
        </div>
        
        <script>
            function removeReset() {
                //it doesn't work
                document.getElementById("no_reset").value = "dont reset";
            }
        </script>
        </body>
</html>

标签： javascripthtml

解决方案

如果您有大量输入，则可以重置所有字段，但具有自定义属性的字段除外。

看一个示例 vanilla js 实现：

function customReset()
{
    var fieldsToReset = document.querySelectorAll("input:not([data-noreset='true'])")
  for(var i=0;i<fieldsToReset.length;i++){
    fieldsToReset[i].value = null;
  }
  
}
<form id="myForm">
  <input id="txt1" name="txt1" /> : should reset<br/>
  <input id="txt2" name="txt2" /> : should reset<br/>
  <input id="txt3" name="txt3" /> : should reset<br/>
  <input id="txt4" name="txt4" data-noreset="true" /> : <strong>won't reset</strong><br/>
  <button type="button" onclick="customReset()">
    Reset
  </button>
</form>

注意type="button"属性。这既不需要重置表单也不需要提交。

推荐阅读