javascript - 重置表单无效值

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

如果您查看input DOM 对象，validity 对象下有一个属性badInput，其值为boolean。对于数字条目或空字段，它是 false。然而，对于非数值，它是 true，有趣的是可以在您的情况下使用。

注意:仅在 firefox 和 safari 上测试

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

利用这些知识，您可以修改函数以检查 badInput，以通过最少的调整实现您想要的结果。

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

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

function detectChange() {
  var inputs = form.querySelectorAll('input');
  for (var input of inputs) {
    if ((input.value && input.value != input.defaultValue) || input.validity.badInput) {
      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="11">
  <button type="button">Reset</button>
</form>

更新:

更新到封面:

inputs with non-empty default values