2011-01-02 3 views
2
$('.s').keyup(function(e) { 

    if (!/[A-Za-z0-9]/.test(String.fromCharCode(e.which))) { 
     return false; 
    } 

私のアプリケーションに最適な正規表現ソリューションは何か疑問です。 実際の文字がa〜Z(大文字と小文字)、数字、多分疑問符、ダッシュ(ハイフン)、感嘆符のように押されたときに検索を開始するだけのAjaxベースの検索があります。また、スペースバーを有効にする必要があります。javascript keypress関数:大文字と小文字を区別しないa-z、数字といくつかの特殊文字?

それ以外の場合は、shiftキー、optionキー、またはcontrolキーを押してもajax検索がトリガーされます。

ここで理解するのが最も簡単な正規表現パターンは何ですか? あなたの助けてくれてありがとう

答えて

2

正規表現の基本的な形式はうまくいくように見えますが、含める内容を含めるだけでアクセント付きの文字を認識できます。代わりに、を除外するの文字はではありませんが必要です。

しかし、これはkeyupイベントではなくkeypressイベントを使用します。 keypressは、実際に入力可能な文字が入力されたときに起動し、キーリピート時に発生します(ただし、キーが繰り返されてもが得られます)。 keypressは、Shift、Meta、Ctrlなどのために起動されません。更新:これは必ずしもクロスブラウザ(しばらく)である必要はありません。

keypressをフックしている場合は、実際の文字を扱うためにブラウザとそのロケールを意識するのではなく、何もフィルタリングしません(正規表現は必要ありません)。私はまた、おそらく不必要な検索の多くを避けるために短い遅延を含めるだろう。その人がかなり早く「fred」とタイプすると、「f」、「fr」、「fre」で検索する必要はありません。

これは私が意味するものの例です(少し遅れてkeypressを組み合わせる)。あなたが本当に特定の文字をフィルタリングしたい場合は、イベントハンドラであることを行うことができますが、私は上記の理由については、以下を持っていない:

HTML:あなた以来のjQueryを使用して

<input type='text' id='theText'> 

のJavaScript(、 )jqueryであなたの質問にタグ付け:

jQuery(function($) { 
    var searchTimer = 0; 

    $('#theText').keypress(function() { 
    if (searchTimer != 0) { 
     clearTimeout(searchTimer); 
    } 
    searchTimer = setTimeout(doSearch, 250); 
    }); 

    function doSearch() { 
    searchTimer = 0; 
    display("Search: '" + $('#theText').val() + "'"); 
    } 

    function display(msg) { 
    $('<p/>').html(msg).appendTo(document.body); 
    } 
});​ 

Live copy

の例では、最後の後の四半期秒を検索することを3210それは見る;適度に表示されるようにパラメータをsetTimeoutに調整してください。


更新:矢印キーの下にあなたのコメントの後、私は思った「しかし、あなたはkeypressの矢印キーが表示されていない、あなたのですか?」答えは:あなたはOperaと他のいくつかの人にします。ため息はそうです、フィルターで:

$('#theText').keypress(function(event) { 
    // Magic numbers from http://unixpapa.com/js/key.html 
    switch (event.keyCode) { 
    case 37: // Left 
    case 38: // Up 
    case 39: // Right 
    case 40: // Down 
     break; 

    default: 
     // A "real" key, include it 
     if (searchTimer != 0) { 
     clearTimeout(searchTimer); 
     } 
     searchTimer = setTimeout(doSearch, 250); 
    } 
}); 

function doSearch() { 
    searchTimer = 0; 
    display("Search: '" + $('#theText').val() + "'"); 
} 

Live copy(この1つはちょうど矢印キーをフィルタリング、あなたはそれを拡張したいと思う)

あなたはすでに場合はわからない場合それはthis pageは、ブラウザ間のキーボードイベントである狂気に関する情報に最適です。若干古いかもしれません。

+0

イベントハンドラでは、特定の文字をフィルタできますか?例えば私は矢印キーで検索を開始したくない。 – matt

+0

@user:「keypressに矢印キーが表示されていない」と言っていましたが、一部のブラウザでは表示されています。 * sigh *あなたがフィルタリングする場所と方法の例を示して更新しました。 :-) –

+0

私はfirefoxを使用していると私は私のMACの矢印キーを押すとキーを押す発砲されています。 event.which私のケースでは0を返しますので、実際には動作しません。とにかくありがとう。私は解決策を見つけるでしょう。問題は、実際に私の矢印キーがajaxed検索結果をナビゲートする必要があるということです。だから私は、私が上または下のキーを押すが、私の結果のリスト要素の間にジャンプするsearchreultsをリロードしたくない:http://jsfiddle.net/zBjrS/1/ – matt

関連する問題