我可以从HTML元素获取到已经存在的JS元素

Question

背景

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

field = new Field(wrapperElements[i]);

当输入触发了blur事件时，我在该字段上运行验证。 我这样做是为了在用户处理表单时可以运行验证，而不必等到提交表单的最后。

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

---

问题

用户仅编辑一个字段，光标仍在该字段中，然后按Enter。 这会在触发字段的blur事件之前触发表单的submit 。 表单尝试提交而不验证已编辑的字段。

我知道，我可能只是强制验证上的所有字段submit ，但似乎不雅给我，好像浪费了计算。 如果该元素是输入，我只需要强制验证该元素即可。

---

零件解决方案

我已经测试了document.activeElement ，并且可以正常工作。 但是，我无法弄清楚如何从document.activeElement返回的节点获取与输入关联的已经存在的JS变量。

---

具体问题

如果我有一个HTML元素，并以此创建一个JS变量...

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

...如何仅通过知道分别通过document.activeElement返回节点来获取该field变量？

Answer 1

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

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

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

这将对照存储的元素检查活动元素。 这里的一个潜在问题是性能。 如果您有大量元素，则可能需要花费一些时间来遍历它们。

如果您非常担心这一点，则可以选择另一种选择，那就是在页面加载期间，将一个data属性添加到您的元素中，该属性是一个整数，您可以使用该属性引用存储的变量。

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


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

这样可以避免循环，并且应该花更少的时间。 如果您的字段少于50个，则无论哪种方式都不应该引起注意。