0

通常のHTML要素でデータフィールドを表示し、ユーザーが表示要素をクリックしたときにのみ入力フォームを表示するインターフェイスデザインがあります。

<div class="header-container">
    <header class="header-displayName"></header>

    <form class="form" style="display: none;">
    <section><label>First Name</label>
        <span><input type="text" class="form-input" placeholder="first name"></span></section>
    <section><label>Last Name</label>
        <span><input type="text" class="form-input" placeholder="last name"></span></section>
        <div class="hidden-submit"><input type="submit" tabindex="-1"/></div>
    </form>
</div>

上記の場合、ユーザーはjqueryで配線されたヘッダー要素をクリックして、それ自体を非表示にし、フォームを表示します。Enterキーを押すと、フォームはそれ自体を非表示にしてヘッダーを表示し、同時にフォームデータの送信をAjaxリクエストします。

ここでの問題は、次のステップでユーザーエクスペリエンスを向上させる方法です。ユーザーがフォームをタブで移動したり、ドキュメント内の別の場所をクリックしたりすると、フォームは通常どおり非表示にして送信する必要があることを認識します。

フォームのblurイベントを試しましたが、後で、それは内部の個々の入力要素からのblurイベントのバブリングにすぎないことに気付きました。その結果、フォームはfirstName入力のフォーカスを失うだけで非表示/送信されます。ユーザーはlastName入力で作業する機会がありません。もちろん、各入力フィールドでstopPropagation（）を試した場合、フォームには独自のblurイベントがないため、フォームがぼやけることはありません。

フォームレベルでぼかしイベントを確実にキャプチャするにはどうすればよいですか？

この実装により多くのコンテキストを提供するために、これは再利用可能なUIコンポーネントであるため、単一ページのドキュメントに実際に静的に配置されることはありません。同じドキュメントに複数回表示されることもあります。他のコンポーネントを台無しにする可能性のあるドキュメントレベルでの配線は行わないでください。このようなフォームのすべてのフィールドもオプションであるため、送信する前にすべてのフィールドに入力することを期待することはできません。

4

1 に答える 1

0

jquery が擬似セレクター チェック " :focus " を提供していることがわかりました。これにより、フォーム レベルでのぼかしを聞き取りやすくなりますが、わずかな遅延の後に他の兄弟入力要素にフォーカスがあるかどうかを確認してください。

setTimeout(function(){
  if (!$('.form-input').is(':focus')) {
    $('.form').submit();
  }
}.bind(this), 10);

あるいは、セレクターをフォーム「.form input」またはその他の子孫セレクターに適用して、対象の入力フィールドをカバーすることもできます。

于 2012-11-22T01:51:58.250 に答える