1. ホーム
  2. javascript

[解決済み] ページ上にinput要素を配置せずにキー入力をキャプチャする?

2023-04-18 10:51:31

質問

JavaScript でページに入力要素を配置せずに Ctrl+Z などのキー押下をキャプチャするにはどうしたらよいでしょうか。IE では、keypress および keyup イベントは入力要素 (入力ボックス、テキストエリアなど) にのみバインドできるようです。

どのように解決するのですか?

jQueryにも、信じられないほど簡単に使える優れた実装があります。 ここでは、ブラウザ間でこの機能を実装する方法を説明します。

$(document).keypress(function(e){
    var checkWebkitandIE=(e.which==26 ? 1 : 0);
    var checkMoz=(e.which==122 && e.ctrlKey ? 1 : 0);

    if (checkWebkitandIE || checkMoz) $("body").append("<p>ctrl+z detected!</p>");
});

IE7,Firefox 3.6.3 & Chrome 4.1.249.1064 でテストしています。

別の方法として、keydownイベントを使用して、event.keyCodeを追跡することもできます。 しかし、jQuery は event.which を使用して keyCode と charCode を正規化するため、その仕様ではさまざまな状況で event.which を使用することが推奨されています。

$(document).keydown(function(e){
if (e.keyCode==90 && e.ctrlKey)
    $("body").append("<p>ctrl+z detected!</p>");
});