は、すでに私は多くのテキスト入力（<code><input type="text" /></code>）でフォームを持っているJS要素

Question

背景

既存します。フォームを介しpageloadで、Iはループなどなど、元の値、現在のフォーマット値、検証要件、等の検証のような方法、および特性保持それぞれについてJSオブジェクト変数の作成：

field = new Field(wrapperElements[i]); 

入力はblurイベントが発生したので、そのフィールドで検証を実行します。フォームを送信するときの最後まで待つのではなく、ユーザーがフォームを使用しているときに検証を実行できるように、これを行います。

次に、有効性の結果をFieldオブジェクトにキャッシュします。ユーザーがフォームを送信すると、すべてのフィールドを検証する必要はなく、計算済みの有効性をチェックするだけで、最後にスピードが向上します。

---

問題

ユーザーが唯一のフィールドを編集し、カーソルがそのフィールドにまだある、とユーザーのヒットが入ります。フィールドのblurイベントを発生させる前に、フォームのsubmitを起動します。フォームは、編集したフィールドを検証せずに送信を試みます。

submitにすべてのフィールドを強制的に検証することができますが、それは私にとっては魅惑的ではないようですが、無駄な計算のようです。その要素が入力であれば、現在フォーカスされている要素を強制的に検証するだけです。

---

パートソリューション

私はdocument.activeElementをテストしてみた、それが動作します。しかし、document.activeElementが返すノードから、入力に関連付けられている既存のJS変数を取得する方法を理解できません。

---

具体的な質問

私は、HTML要素を持っている、と私は

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

は...どうやって入手することができます...そのようにしてJS変数を作成する場合は、その 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] 
    } 
} 

これは、保存された要素に対してアクティブな要素をチェックします。ここで問題となるのは、パフォーマンスです。要素数が多い場合は、要素をループするのに少し時間がかかることがあります。

もう1つの選択肢は、ページロード中に気になる場合は、要素に格納されている変数を参照できる整数型のデータ属性を追加することです。

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


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

これはループを回避し、少し時間がかかります。あなたは50フィールド未満がある場合でも、どちらか目立つことはありません。