重置表单无效值

Question

这是一个示例表格：

var form = document.querySelector('form');

function detectChange() {
  var inputs = form.querySelectorAll('input');
  for (var input of inputs) {
    if (input.value != input.defaultValue) {
      return true;
    }
  }
}

form.querySelector('button').addEventListener('click', function() {
  if (detectChange() && confirm('Are you sure you want to reset?')) {
    form.reset();
  }
});

<form>
  <input type="number">
  <input type="number" value="7">
  <button type="button">Reset</button>
</form>

我希望即使用户输入非数字值，重置按钮也可以使用。

Answer 1

如果您查看inputDOM对象，则对象下有一个属性badInput，validity其值为a boolean。对于数字输入或空白字段，为false。然而，它的true非数值，可有趣的是在你的情况下使用。

注意：仅在firefox和上进行了测试safari

input
|  +-- ...
|  +-- validity
|  |   +-- badInput
|  |   +-- ...
|  +-- ...

使用此知识，您可以通过badInput最小的调整来修改功能以检查是否要实现所需的功能。

// non-empty and non default
if ((input.value && input.value != input.defaultValue) || input.validity.badInput)

input
|  +-- ...
|  +-- validity
|  |   +-- badInput
|  |   +-- ...
|  +-- ...

// non-empty and non default
if ((input.value && input.value != input.defaultValue) || input.validity.badInput)

更新：

更新以涵盖：

具有非空默认值的输入