Question

出于某种原因，我需要重置表单，但我希望一个字段保持不变。

以下代码清除了所有字段，但我希望保持第一个字段不变。

<form id="myForm">
    <input id="01" type="text"/>
    <input id="02" type="text"/>
    <input id="03" type="text"/>
    <input id="04" type="text"/>
</form>
<button onclick="document.getElementById('myForm').reset()">Reset</button>

如果可能的话，我想避免使用jQuery。

Answer 1

将其值复制到变量。重置表单。将变量重新分配给值。

Answer 2

您可以使用以下代码：

var form = document.getElementById("myForm");
var inputs = form.getElementsByTagName("input")

for (i = 0; i < inputs.length; i++) {
    if(i != 0) {
        inputs[i].value = "";
    }
}

Answer 3

我一直在研究this question的答案，这是类似的，现在已被标记为重复。这个问题是使用jQuery，所以答案会更短，利用event.data，detach()等等。下面是一般算法，以及方法的香草版本I我们不仅要处理这个问题，还要处理更复杂的情况，你要排除表格的整个子部分。

算法

从中删除元素
允许默认的reset()行为
将元素重新附加到DOM

以下是该计划对代码的非常简单的翻译。这实际上并没有将元素重新附加到DOM中的正确位置。请参阅代码段以获取功能完备的示例。

// within the form's onreset handler, which fires
// before the form's children are actually reset

var form = document.getElementById("myForm"),
    exclude = document.getElementById("_01"),
    parentNode = exclude.parentNode;

parentNode.removeChild(exclude);

// use a timeout to allow the default reset() behavior
// before re-attaching the element
setTimeout(function() { parentNode.appendChild(exclude); });

注意 id更改为_01，并参阅＆＃34;附注＆＃34;在这个答案的最后有更多信息。

重要的属性和方法

＆＃13;

var dataKey = 'data-exclude-selector';

function initiateReset(e) {
  e = e || window.event;

  var button = e.target,
    form = button.form,
    excludeSelector = button.getAttribute(dataKey);

  form.setAttribute(dataKey, excludeSelector);
}

function beforeReset(e) {
  e = e || window.event;

  var form = e.target,
    excludeSelector = form.getAttribute(dataKey),
    elements = form.querySelectorAll(excludeSelector),
    parents = [],
    siblings = [],
    len = elements.length,
    i, e, p, s;

  // When reset #5 is clicked, note the excludeSelector's value is js escaped:
  // #\0030\0035 element attribute value becomes #\\0030\\0035 as js var value

  for (i = 0; i < len; i++) {
    el = elements[i];
    parents.push(p = el.parentNode);
    siblings.push(s = el.nextSibling);
    p.removeChild(el);
  }

  setTimeout(function() {
    for (var j = 0; j < len; j++) {
      if (siblings[j]) {
        parents[j].insertBefore(elements[j], siblings[j]);
      } else {
        parents[j].appendChild(elements[j]);
      }
    }
  });
}

＆＃13;

<form id="myForm" onreset="beforeReset()" data-exclude-selector="">
  <input id="_01" type="text" placeholder="clear" />
  <br />
  <input id="_02" type="text" placeholder="clear" />
  <br />
  <input id="_03" type="text" placeholder="clear" />
  <br />
  <input id="_04" type="text" placeholder="clear" />
  <br />
  <input id="05" type="text" placeholder="clear" />
</form>
<input value="Reset 1" type="reset" form="myForm" data-exclude-selector="#_01" onclick="initiateReset()" />
<input value="Reset 2" type="reset" form="myForm" data-exclude-selector="#_02" onclick="initiateReset()" />
<input value="Reset 3" type="reset" form="myForm" data-exclude-selector="#_03" onclick="initiateReset()" />
<input value="Reset 4" type="reset" form="myForm" data-exclude-selector="#_04" onclick="initiateReset()" />
<input value="Reset funky ID (05)" type="reset" form="myForm" data-exclude-selector="#\0030\0035" onclick="initiateReset()" />
<br/>&nbsp;
<br />
<hr/>
<br/>
<form id="complexForm" onreset="beforeReset()" data-exclude-selector="">
  <input class="exclude" type="text" placeholder="clear" />
  <br />
  <input class="exclude" type="text" placeholder="clear" />
  <br />
  <input type="text" placeholder="clear" />
  <br />
  <input type="text" placeholder="clear" />
  <br />
  <div class="childTest">
    <input type="text" placeholder="clear" />
    <br />
    <input type="text" placeholder="clear" />
    <div class="nestedTest">
      <input type="text" placeholder="clear" />
      <br />
      <input type="text" placeholder="clear" />
    </div>
  </div>
</form>
<input value="Exclude by class" type="reset" form="complexForm" data-exclude-selector=".exclude" onclick="initiateReset()" />
<input value="Exclude subsection" type="reset" form="complexForm" data-exclude-selector=".childTest" onclick="initiateReset()" />

＆＃13;

额外工作

需要做更多的工作来处理人们想要允许重置被排除节点的某些孩子的情况，但我想这可以用多种不同的方式处理，只需要一点思考
1. 这个想法的递归版本
2. @ Quentin的想法可以使用cloneNode()扩展来制作整个节点的副本，而不是分离它，允许完全重置，然后实现一种机制来确定克隆的哪些部分到系统地恢复

旁注（......咆哮？）

虽然HTML5 id attribute允许01有效，但规范会继续表明它可用于其他目的。

3.2.5.1 id 属性

id属性指定其元素unique identifier (ID)。 [DOM]

该值必须在元素IDs中的所有home subtree中唯一，并且必须至少包含一个字符。价值不能   包含任何space characters。


注意：对于ID可以采取的形式没有其他限制;在     特别是，ID可以只包含数字，以数字开头，开始     带下划线，仅包括标点符号等。

注意：元素unique identifier可用于各种用途，     最值得注意的是使用链接到文档的特定部分的方法     片段标识符，作为在编写脚本时定位元素的方法，     并且作为一种从CSS设置特定元素的方式。

这对您来说可能不是问题，但需要注意这一点。例如，document.querySelector[All]()使用CSS样式选择器。

elementList = document.querySelectorAll(selectors);

...


选择器是一个字符串，其中包含一个或多个以逗号分隔的CSS selectors。

根据latest draft of the CSS Selectors spec

ID选择器包含一个＆＃34;数字符号＆＃34; （U + 0023，＃）后面紧跟着ID值，该值必须是CSS identifiers。

在兔子洞的尽头是CSS identifiers

在CSS中，标识符（包括selectors中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0和更高，加上连字符（ - ）和下划线（_）;它们不能以数字，两个连字符或连字符后跟数字开头。标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项）。例如，标识符＆＃34; B＆amp; W？＆＃34;可以写成＆＃34; B \＆amp; W \？＆＃34;或＆＃34; B \ 26 W \ 3F＆＃34;。

请注意，Unicode是代码相当于ISO 10646的代码（请参阅[UNICODE]和[ISO10646]）。

因此，如果您仅使用document.getElementById()，您可能会使用id之类的01元素，但总的来说我会避免使用它。是的，使用document.querySelector[All]()以及使用CSS样式选择器的任何其他组件，您可能能够通过正确转义选择器来解决此限制，但这是一个等待发生的陷阱，尤其是如果涉及多个开发人员。我已在代码段中添加了一个示例（第5个重置按钮）以供完成，如果您要与ID采用此格式的元素进行交互。

Reference table for hex codes

Answer 4

将值存储为一个值

Var partNumber = document.getElementById（'partNumber'）。value;

然后重置表格

document.getElementById（'form'）。reset（）;

然后重新分配值

document.getElementById（'partNumber'）。value = partNumber;

使用Javascript重置除一个字段之外的表单

4 个答案:

算法

重要的属性和方法

额外工作

旁注（......咆哮？）