jQuery:keyPressバックスペースが起動しませんか?


186

私は何を間違っているのだろう:

$(".s").keypress(function(e) {
   switch (e.keyCode) {
      case 8: // Backspace
      //console.log('backspace');
      case 9: // Tab
      case 13: // Enter
      case 37: // Left
      case 38: // Up
      case 39: // Right
      case 40: // Down
         break;

      default:
         doSearch();
   }
});

キーを押しdoSearch()たときにも機能が実行されるようにしたいBackspace。現時点ではBackspace、ChromeとSafari を押しても何も起こりません。

何か案は?


あなたはこのjQueryのプラグインを試すことができますcode.google.com/p/js-hotkeysと「バックスペース」キーのエイリアスを使用
ホセ・マヌエル・ルーカス

3
Chromeでは発火しませんが、Firefoxでは発火します。
vsync 2013

ネクロポスティングには申し訳ありませんが、e.keyCodeよりもe.thisの方が好ましいことに注意してください
Henry Howeson

回答:


324

keyup代わりに使用しますkeypress。これは、ユーザーが何かを押したときにすべてのキーコードを取得します


37
なぜkeyupバックスペースを発射しkeypressないのですか?
Aaron Digulla

それは事実です。キーアップはバックスペースを起動しますが、キープレスはしません->奇妙です。cmd-c、cmd-v、またはcmd-aのように2つのキーが押されているかどうかを確認する機会もあります
matt

17
それは実際にはキーに依存しています。あなたは利用したいkeypressためにEnter、キーkeydownのためBackspaceなど。そうしないと、一部のブラウザーでのイベントが期待どおりに機能しない場合があります。特に、キーのデフォルトの動作を回避したい場合はそうです。間違ったものを使用すると、(Backspaceの場合のように)イベントがまったくキャプチャされないか、それを防ぐことができなくなります。イベント処理コードがそれに到達する前にすでに発生しているためです。
srcspider

5
この回答の問題は、を使用keyupするとテンキー壊れることです。フルキーボードのキーを正しく検出できる回答を知っていますか?
ヒューズ

6
keydownすべてのキーに
最適

32

私はこれを自分で見つけました。私は使用した.onので少し違って見えますが、これを行いました:

 $('#element').on('keypress', function() {
   //code to be executed
 }).on('keydown', function(e) {
   if (e.keyCode==8)
     $('element').trigger('keypress');
 });

ここに私の仕事を追加します。ユーザーが入力したssnを削除する必要があったので、jQueryでこれを行いました

  $(this).bind("keydown", function (event) {
        // Allow: backspace, delete
        if (event.keyCode == 46 || event.keyCode == 8) 
        {
            var tempField = $(this).attr('name');
            var hiddenID = tempField.substr(tempField.indexOf('_') + 1);
            $('#' + hiddenID).val('');
            $(this).val('')
            return;
        }  // Allow: tab, escape, and enter
        else if (event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
        // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
            // let it happen, don't do anything
            return;
        }
        else 
        {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) &&       (event.keyCode < 96 || event.keyCode > 105)) 
            {
                event.preventDefault();
            }
        }
    });



3

.keypress()のjQueryドキュメントによると、印刷できない文字はキャッチされないため、バックスペースはキープレスでは機能しませんが、キーダウンおよびキーアップでキャッチされます。

ブラウザがキーボード入力を登録すると、keypressイベントが要素に送信されます。これは、修飾キーと、Shift、Esc、削除などの非印刷キーがトリガーキーダウンイベントをトリガーし、キープレスイベントはトリガーしないことを除いて、キーダウンイベントと同様です。2つのイベントのその他の違いは、プラットフォームとブラウザによって異なります。(https://api.jquery.com/keypress/

場合によっては、キーアップが望ましくないか、他の望ましくない影響があり、キーダウンで十分です。これを処理する1つの方法は、keydownすべてのキーストロークをキャッチし、短い間隔のタイムアウトを設定してキーが入力されるようにしてから、その後。

jQuery(el).keydown( function() { 
    var that = this; setTimeout( function(){ 
           /** Code that processes backspace, etc. **/ 
     }, 100 );  
 } );
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.