0

ユーザーのテキストに2つの禁止文字が含まれていないかどうかを確認する次のコードがあり、それが思い通りに進んでいます。問題は、禁止文字を含むテキストの場合、アラートが鳴った後に入力に集中したいということです。ただし、css スタイルは入力に適用されます。

このコードのどの点が欠けていますか?

$(".option, .fixed").blur(function(){
    var str = $(this).val();
    if(str.indexOf("|") >= 0 || str.indexOf(":") >= 0) {
        alert("The informatin you provided contains illegal characters( | : )");    
    }
    $(this).css('border','1px solid pink').focus();
});
4

2 に答える 2

1

blurイベントが完全に解決される前に、DOM ツリーをバブリングしている間にコードが実行されます。要素は、イベントがスタックの一番下に到達し、ブラウザーによって処理された場合にのみ、フォーカスを失います。

.focus()その関数内で呼び出すと、focusアクションが実行され、その後blurアクションが再開され、元の入力は最終的にフォーカスを失います。

がブラウザによって処理されたfocus 後にトリガーが必要です。blur

使用できますsetTimeout：

$(".option, .fixed").blur(function(){
    var str = $(this).val();
    if(str.indexOf("|") >= 0 || str.indexOf(":") >= 0) {
        alert("The informatin you provided contains illegal characters( | : )");    
    }
    $(this).css('border','1px solid pink');

    var that = this;
    setTimeout( function(){ $(that).focus() }, 0 );
});

ただし、このパターンに関連する問題に注意する必要があります。ノードに与えるfocusと、別のノードでトリガーblurされ、奇妙な/壊れた GUI の動作につながる可能性があります。

ここに例があります（jsfiddle here）：

  • 最初の入力をクリックしてから、その外側をクリックします。目的の動作が表示されます。
  • 最初の入力をクリックしてから、2 番目の入力をクリックします。無限blur/focusループが発生し、GUI が使用できなくなります。

これを回避する最も簡単な方法は、フィールドを強調表示し、エラー メッセージを表示して、フォーカスをそのままにすることです。

于 2013-05-29T07:01:33.880 に答える