我可以從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個，則不應以任何方式注意。