75

onkeydownテキストボックスのイベントによってトリガーされる関数があります。ユーザーがバックスペース キーまたは Del キーを押したかどうかを確認するにはどうすればよいですか?

4

5 に答える 5

122

これを試して：

document.addEventListener("keydown", KeyCheck);  //or however you are calling your method
function KeyCheck(event)
{
   var KeyID = event.keyCode;
   switch(KeyID)
   {
      case 8:
      alert("backspace");
      break; 
      case 46:
      alert("delete");
      break;
      default:
      break;
   }
}
于 2010-03-01T02:21:35.460 に答える
24

現在、これを行うコードは次のようになります。

document.getElementById('foo').addEventListener('keydown', function (event) {
    if (event.keyCode == 8) {
        console.log('BACKSPACE was pressed');

        // Call event.preventDefault() to stop the character before the cursor
        // from being deleted. Remove this line if you don't want to do that.
        event.preventDefault();
    }
    if (event.keyCode == 46) {
        console.log('DELETE was pressed');

        // Call event.preventDefault() to stop the character after the cursor
        // from being deleted. Remove this line if you don't want to do that.
        event.preventDefault();
    }
});

ただし、将来、ブラウザで広くサポートされるようになったら、非推奨の の代わりに.keyまたは.codeの属性を使用することをお勧めします。KeyboardEvent.keyCode

知っておくべき詳細:

  • event.preventDefault()keydown イベントのハンドラーを呼び出すと、キー押下のデフォルトの効果が防止されます。文字を押すと、アクティブなテキスト フィールドに文字が入力されなくなります。テキスト フィールドでバックスペースまたは削除を押すと、文字が削除されなくなります。documentアクティブなテキスト フィールドなしでバックスペースを押すと、バックスペースで前のページに戻る Chrome のようなブラウザーでは、その動作が妨げられます (テキスト フィールドの代わりにイベント リスナーを追加してイベントをキャッチする限り)。

  • 属性の値がどのように決定されるかに関するドキュメントは、W3 の UI イベント仕様のkeyCodeセクションB.2.1およびイベントを決定keyCodeする方法にあります。keydownkeyup特に、Backspace と Delete のコードはB.2.3 固定仮想キー コードにリストされています。

  • と.keyCodeを支持して属性を非推奨にする取り組みが進行中です。W3 は、このプロパティを"legacy"、MDN を"deprecated"と説明しています。.key.code.keyCode

    .keyandへの変更の利点の 1 つは、.codeASCII 以外のキーをより強力でプログラマーにとって扱いやすいものにすることです。可能なすべてのキー値を一覧表示する仕様を参照してください。日本語キーボードに変更して、メディア キーを目立たなくします。この質問に非常に関連するもう 1 つの問題は、変更されたキー押下の意味と押された物理キーを区別することです。"Backspace""Delete"

    小型の Mac キーボードには、Deleteキーはなく、キーのみBackspaceです。ただし、Fn+を押すことは、通常のキーボードでBackspace押すのと同じです。つまり、テキスト カーソルの前の文字ではなく、後の文字を削除します。ユースケースによっては、コード内で を押したまま Backspace または Delete として処理したい場合があります。そのため、新しいキー モデルでは選択できます。DeleteBackspaceFn

    .key属性はキープレスの意味を与えるので、+はFnstringBackspaceを生成します"Delete"。.code属性は物理キーを提供するため、+FnはBackspace引き続き string を生成します"Backspace"。

    残念ながら、この回答を書いている時点では、ブラウザの 18% でしかサポートされていないため、幅広い互換性が必要な場合は.keyCode、当面の間「レガシー」属性に固執します。しかし、あなたが未来からの読者である場合、または特定のプラットフォームを対象としており、それが新しいインターフェースをサポートしていることを知っている場合は、次のようなコードを書くことができます:

    document.getElementById('foo').addEventListener('keydown', function (event) {
    if (event.code == 'Delete') {
        console.log('The physical key pressed was the DELETE key');
    }
    if (event.code == 'Backspace') {
        console.log('The physical key pressed was the BACKSPACE key');
    } 
    if (event.key == 'Delete') {
        console.log('The keypress meant the same as pressing DELETE');
        // This can happen for one of two reasons:
        // 1. The user pressed the DELETE key
        // 2. The user pressed FN+BACKSPACE on a small Mac keyboard where
        //    FN+BACKSPACE deletes the character in front of the text cursor,
        //    instead of the one behind it.
    }
    if (event.key == 'Backspace') {
        console.log('The keypress meant the same as pressing BACKSPACE');
    }
});
于 2016-02-28T23:49:29.873 に答える
7

関数で、キーコード 8 (バックスペース) または 46 (削除) を確認します。

キーコード情報
キーコード一覧

于 2010-03-01T02:21:08.550 に答える
0

Firefox 以外で動作するかどうかは不明です:

callback (event){
  if (event.keyCode === event.DOM_VK_BACK_SPACE || event.keyCode === event.DOM_VK_DELETE)
    // do something
  }
}

event.DOM_VK_BACK_SPACEそうでない場合は、8andevent.DOM_VK_DELETEで置き換える46か、定数として定義します (読みやすくするため)。

于 2010-03-01T02:26:48.667 に答える