6
  1. <input type=text>withfocusoutイベントハンドラーがあります
  2. <button>クリックイベントハンドラーがあります

Focusoutは、入力ボックスの形式が正しいかどうかをチェックします。これは、正規表現に対して入力値をテストすることによって行われます。失敗した場合は、メッセージ (divしばらくするとフェードインとフェードアウト) が表示され、呼び出して入力を再度フォーカスします。

window.setTimout(function() { $(this).focus(); }, 10);

focusoutイベントハンドラーで再フォーカスできないためです。focusoutイベントもキャンセル不可。参考までに。

Clickは入力要素からデータを収集し、Ajax を使用して送信します。

問題

ユーザーTABsがフォームを通過すると、すべて問題ありません。特定の入力ボックスがフォーマット チェックに失敗すると、ユーザーが を押した直後に再度フォーカスされますTAB。

しかし、ユーザーがTAB個々の入力フィールドを使用せずにクリックすると、. をクリックするまですべてが正常に機能しますbutton。focusout起動し、再フォーカスのタイムアウトを設定します。タイムアウトが非常に短いため、後でフォーカスが行われ、clickイベントが発生して Ajax リクエストが発行されます。

質問

私はフォーマット チェックを独立した jQuery プラグインとして実装しましたが、それを維持したいと考えています。フォーマット正規表現が定義されている特定の属性を持つすべての入力フィールド.live()にアタッチするために使用します。focusout

データの送信も一般的であり、書式設定プラグインに依存させたくありません。どちらも独立したままにする必要があります。

これら 2 つのプラグインを依存させずに、クリック イベントが実行されないようにするにはどうすればよいですか?

私がいじっているコード例

いくつかの検索の後、すべての主要なブラウザーがサポートdocument.activeElementされていることがわかりましたが、Chrome で動作させることはできません。FF と IE は両方ともアクティブな要素であると報告しますが、Chrome は要素で起動されたにもかかわらずアクティブであるとthis常に言います。BODYclickbutton

このコードhttp://jsfiddle.net/Anp4b/1/を確認して、ボタンをクリックしてください。Chrome と他のブラウザでテストして、違いを確認してください。

4

2 に答える 2

4

フラグを使用できます...

ライブデモ: http://jsfiddle.net/Anp4b/4/

だからあなたの質問は：

これら 2 つのプラグインを依存させずに、クリック イベントが実行されないようにするにはどうすればよいですか?

もちろん、クリック イベントを防ぐことはできません。ユーザーがボタンをクリックしたい場合はクリックし、クリック イベントがトリガーされます。それについてあなたができることは何もありません。

したがって、上記の質問に対する答えは次のとおりです。

現在の状況に基づいて、クリック ハンドラー内で検証結果を取得し、その結果に基づいて、フォームの送信を行うかどうかを決定する必要があります。

JS コード:

$("#Name").focusout(function(){    
    var that = this;    
    valid = this.value.length ? true : false;    
    !valid && window.setTimeout(function() {
        $(that).focus();
    }, 0);            
});


$("#Confirm").click(function(e) {    
    if ( !valid ) { return false; }    
    e.preventDefault();    
    alert('AJAX-TIME :)');    
 });

HTML コード:

<input type="text" id="Name">
<button id="Confirm">OK</button>
于 2011-01-07T19:15:59.520 に答える
0

.focusoutの代わりに使用する理由はあります.blurか?

フラグを使用するのは良い考えですが、私は要素にクラスを使用したいと考えています。クラスを使用して状態を決定することにより、それに応じてスタイルを設定することもできます。これがあなたのフィドルに基づく私の例です。

探している結果が得られることを願っている別のソリューション。

1) 名前付きクリック ハンドラーを作成します。

var clickHandler = function(e){ /** submit form or whatever you want to do**/ };
$("button").click(clickHandler);

2) 検証に失敗した場合、次を focusout イベントに追加します。

$("button").unbind("click", clickHandler).one("click", function(){ button.click(clickHandler); return false;});

この例はここにあります。

于 2011-01-07T19:32:10.350 に答える