jQueryを使用してバックスペースキーをトラップする方法は？

Question

jQueryのkeyup、keydown、またはkeypressメソッドは、バックスペースキーが押されたときに起動されます。バックスペースキーの押下をどのようにトラップするのですか？

Answer 1

はこれを試してみてください。 バックスペースは入力要素でうまく動作するはずですが、フォーカスが段落などの場合は機能しません。ページが履歴の前のページに戻る傾向があるためです。

$('html').on('keydown' , function(event) { 

     if(! $(event.target).is('input')) { 
      console.log(event.which); 
      //event.preventDefault(); 
      if(event.which == 8) { 
      // alert('backspace pressed'); 
      return false; 
     } 
     } 
}); 

false => event.preventDefaultとevent.stopPropagationの両方が有効です。

Answer 2

通常のjavascriptを使用して、バックスペースキーをトラップできます。 event.keyCodeメソッドを使用できます。あなたは（46）[削除]と同様に[バックスペース]（8）のキーは、次の手順を使用し、両方をチェックしたい場合は

if (event.keyCode == 8) { 
    // Do stuff... 
} 

：コードは次のようになりますので、キーコードは、8です：上記と同じ考え方で作業

$('html').keyup(function(e){if(e.keyCode == 8)alert('backspace trapped')}) 

Answer 3

を、少しを一般：

if (event.keyCode == 8 || event.keyCode == 46) { 
    // Do stuff... 
} 

Answer 4

ほとんどのブラウザでバックスペースのデフォルトの動作は、前のページに戻ることです。 でない場合は、が必要です。この動作が必要な場合は、preventDefault()というコールを確認する必要があります。しかし、OPに示唆されているように、いつもそれをpreventDefault()と呼んでいると、テキストフィールド内のものを削除することも不可能になります。以下のコードは、this answerに適合した解決策を持っています。

また、ハードコードされたkeyCode値を使用するのではなく（一部の値は、ブラウザによって異なりますが、BackspaceまたはDeleteで真であるとは限りませんが）、jQuery has keyCode constantsが既に定義されています。これにより、コードをより読みやすくし、keyCodeの不一致を処理します。

// Bind keydown event to this function. Replace document with jQuery selector 
// to only bind to that element. 
$(document).keydown(function(e){ 

    // Use jquery's constants rather than an unintuitive magic number. 
    // $.ui.keyCode.DELETE is also available. <- See how constants are better than '46'? 
    if (e.keyCode == $.ui.keyCode.BACKSPACE) { 

     // Filters out events coming from any of the following tags so Backspace 
     // will work when typing text, but not take the page back otherwise. 
     var rx = /INPUT|SELECT|TEXTAREA/i; 
     if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly){ 
      e.preventDefault(); 
     } 

     // Add your code here. 
    } 
});