我可以从HTML元素到现有的JS元素吗？

Question

背景

我有一个包含许多文字输入的表单（<input type="text" />）。在页面加载中，我遍历表单并为每个表单创建一个JS对象变量，它包含诸如validate之类的方法，以及诸如原始值，当前格式化值，验证要求等属性：

field = new Field(wrapperElements[i]);

当输入触发了blur事件时，我会对该字段运行验证。我这样做，以便我可以在用户正在处理表单时运行我的验证，而不是等到表单提交结束时。

然后我将有效性结果缓存在Field对象中。当用户提交表单时，我不必验证每个字段，我只需要检查已经计算的有效性，最后提高速度。

问题

用户只编辑一个字段，光标仍然在该字段中，用户点击进入。这会在触发字段的submit事件之前触发表单blur。表单尝试在不验证已编辑字段的情况下提交。

我知道我可以强制验证submit上的所有字段，但这对我来说似乎不优雅，而且似乎浪费了计算。我只需要强制验证当前聚焦的元素，如果该元素是输入。

零件解决方案

我已经测试了document.activeElement，这是有效的。但是，我无法弄清楚如何从document.activeElement返回的节点获取与输入关联的现有JS变量。

具体问题

如果我有一个HTML元素，并且我用它创建一个JS变量......

<input type="text" value="My input!" id="mainInput" />
---
var field = document.getElementById('mainInput');

...如何通过field单独再次返回节点来获取document.activeElement变量？

Answer 1

Javascript允许您使用==或===比较器与HTMLElement变量进行比较。因此，您可以遍历存储的变量，并将它们与document.activeElement进行比较。

...
fields[i] = form.children[i]
...

for ( ... ) {
    if ( fields[i] == document.activeElement) {
        // force validation of fields[i]
    }
}

这将根据您存储的元素检查活动元素。这里的一个潜在问题是性能。如果你有大量的元素，可能需要一些循环它们。

另一个选择，如果你非常担心这是在页面加载期间，为你的元素添加一个整数的数据属性，你可以用。引用存储的变量。

...
fields[i] = form.children[i]
fields[i].dataset.interator = i;
...


var iterator = document.activeElement.dataset.iterator;
// force validation of fields[iterator];

这可以避免循环，并且应该花费更少的时间。如果你的字段少于50个，那么无论如何都不应该注意到。