0

jQueryで入力バリデーションを行いたい。ユーザーが入力をぼかすたびに、検証を受ける必要があります。検証は問題ではなく、重要な部分です。

一部の入力は、より大きな親要素に埋め込まれています。親要素は、focusin および focusout イベントのインジケータである必要があります。つまり、ユーザーが入力の親要素をクリックすると、入力にフォーカスする必要があります。

ここにデモンストレーションがあります：

jsFiddle のデモ

デモでは、最初の入力はクリック可能な で囲まれてulおり、下にある入力がフォーカスされます。div2 番目の入力は、何もしないa で囲まれています。コンソールで出力を確認します。

デモから取得したマークアップを次に示します。HTML :

<ul>
<li>
    <input type="text" class="embed" />
</li>
</ul>

<div>
    <input type="text" class="normal" />
</div>​

JavaScript :

$('input').focusin(function(event) {
    console.log('input.' + $(this).attr('class') + ' focusin');
});

$('input').focusout(function(event) {
    console.log('input.' + $(this).attr('class') + ' focusout');
    // either here or in blur:
    // now i want to do some validation and display errors if there are any
});

$('input').blur(function(event) {
    console.log('input.' + $(this).attr('class') + ' blur');
    // either here or in focusout:
    // now i want to do some validation and display errors if there are any
});

$('ul').click(function(event){
    console.log('ul click');
    $('input.embed').focus();
});
​

現在、これらは私の質問と問題です：

  1. 埋め込みをクリックするとinput、クリックイベントも発生しulますが、これは望ましくありません。入力が直接クリックされた場合、そのイベントでどのように検出できますか?
  2. 埋め込みinputが既にフォーカスされていて、親ulをクリックすると、(検証をトリガーする) の focusout イベントが発生し、クリック ハンドラーinputのためにすぐに再びフォーカスされます。ulどうすればこれを検出し、単に何もしないでしょうか? 実際、ユーザーの観点からは、フォーカスは変わっていません。
  3. blurとはどう違いfocusoutますか？
4

1 に答える 1

2

最初の質問:

$('ul input.embed').click(function(event){
    event.stopPropagation();
});

jQueryAPIドキュメントからの3番目の質問について：

focusout イベントは、要素またはその中の要素がフォーカスを失うと、その要素に送信されます。これは、親要素からのフォーカスの喪失の検出をサポートするという点で、blur イベントとは異なります (つまり、イベント バブリングをサポートします)。

于 2012-06-15T09:44:53.527 に答える