我可以从HTML元素获得现有的JS元素

Question

背景

我有一个窗体有很多文本输入（<input type="text" />）。上页面加载，我通过表单循环，并为每一个JS对象变量，保存方法，诸如验证和性能如原始值，电流格式化值，验证要求，等：

field = new Field(wrapperElements[i]); 

当输入已激活blur事件，我在该字段上运行验证。我这样做是为了让我可以在用户正在处理表单时运行我的验证，而不是等到表单提交后才结束。

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

---

问题

用户编辑只有一个字段，光标仍然在这一领域，并在用户点击进入。在射击场的blur事件之前，这将触发表格的submit。表单试图提交而不验证编辑的字段。

我知道我可以强制验证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个，则不应以任何方式注意。