8

キーを押して離したときに JavaScript 関数を実行する方法はありますか?

たとえば、キーが押されexample()たときに関数を実行するにはどうすればよいでしょうか? T前にこれらの例を見たことがありますが、それらは長くて厄介で、機能させることができませんでした。このようなものは単に に入るでしょう<script>か<head>?

4

3 に答える 3

25

パート 1: スクリプト ブロックを配置する場所

ページ ヘルプ機能のようにページ全体をキャプチャするには (おそらく F1 をキャプチャしたいですか?)、スクリプト ブロックを<head>タグ内のスクリプト内に配置します。ただし、DOM 要素をキャプチャする場合は、DOM 要素が発生した後にコードを実行する必要があります (スクリプトは見つかったときに解釈されるため、DOM 要素がまだ存在しない場合、セレクター エンジンはそれを見つけることができません)。 . これが意味をなさない場合は、何かを言ってください。記事が見つかります)。

ただし、考慮すべき点があります。現在、優れた JavaScript プログラマーのメンターは、すべての JavaScript をページの最後にロードすることを推奨しています。ドキュメントの先頭にロードする必要があるのは、jQuery などのライブラリだけです。これらは広くキャッシュされているためです。特に、jQuery の CDN バージョンを使用している場合は、一般的にロード時間に影響を与えない傾向があるためです。

これで、「コードブロックを のどこに配置すればよいか?」という質問に答えることができ<head>ます: いいえ。最後に。

さて、実際にキーストロークをキャプチャする方法については、次の 3 つの部分に分けて説明します。

パート 2: ウィンドウ上のすべてのキーボード イベントをキャプチャする:

<html>
<head>
  <title>blah blah</title>
  <meta "woot, yay StackOverflow!">
</head>
<body>
  <h1>all the headers</h1>
  <div>all the divs</div>
  <footer>All the ... ... footers?</footer>
  <script>

  /* the last example replaces this one */

  function keyListener(event){ 
    //whatever we want to do goes in this block
    event = event || window.event; //capture the event, and ensure we have an event
    var key = event.key || event.which || event.keyCode; //find the key that was pressed
    //MDN is better at this: https://developer.mozilla.org/en-US/docs/DOM/event.which
    if(key===84){ //this is for 'T'
        doThing();
    }
  }

  /* the last example replace this one */

  var el = window; //we identify the element we want to target a listener on
  //remember IE can't capture on the window before IE9 on keypress.

  var eventName = 'keypress'; //know which one you want, this page helps you figure that out: http://www.quirksmode.org/dom/events/keys.html
  //and here's another good reference page: http://unixpapa.com/js/key.html
  //because you are looking to capture for things that produce a character
  //you want the keypress event.

  //we are looking to bind for IE or non-IE, 
  //so we have to test if .addEventListener is supported, 
  //and if not, assume we are on IE. 
  //If neither exists, you're screwed, but we didn't cover that in the else case.
  if (el.addEventListener) {
    el.addEventListener('click', keyListener, false); 
  } else if (el.attachEvent)  {
    el.attachEvent('on'+eventName, keyListener);
  }

  //and at this point you're done with registering the function, happy monitoring

  </script>
</body>
</html>

パート 3: 特定の要素でのすべてのキーボード イベントのキャプチャ

この行:またはその他のドキュメント セレクターであるvar el = window; //we identify the element we want to target a listener on可能性もあります。var el = document.getElementByTagName('input');この例は、同じように機能します。

パート 4: 「エレガントな」ソリューション

var KeypressFunctions = [];
KeypressFunctions['T'.charCodeAt(0)] = function _keypressT() {
  //do something specific for T
}
KeypressFunctions['t'.charCodeAt(0)] = function _keypresst() {
  //do something specific for t
}
//you get the idea here

function keyListener(event){ 
  //whatever we want to do goes in this block
  event = event || window.event; //capture the event, and ensure we have an event
  var key = event.key || event.which || event.keyCode; //find the key that was pressed
  //MDN is better at this: https://developer.mozilla.org/en-US/docs/DOM/event.which
  KeypressFunctions[key].call(); //if there's a defined function, run it, otherwise don't
  //I also used .call() so you could supply some parameters if you wanted, or bind it to a specific element, but that's up to you.
}

これは何をしますか？

これKeypressFunctionsは配列であり、さまざまな値を入力できますが、人間がある程度判読できるようにします。配列への各インデックスは、関数を追加する配列へのインデックス位置の文字コード (おなじみですか?)'T'.charCodeAt(0)を与えるように行われます。したがって、この場合、配列には(T) と(t)event.which || event.keyCodeの 2 つの定義済みインデックス値しかありません。と書くこともできますが、人間が読める長さを犠牲にして、人間が判読しにくくなります。常に最初に自分自身のためにコードを書いてください。多くの場合、マシンはあなたが信じているよりもスマートです。ロジックでそれを打ち負かそうとしないでください。ただし、少しエレガントにできる場合は、過剰な if-else ブロックをコーディングしないでください。84116KeypressFunctions[84] = function ...

ガッ！他のことを説明するのを忘れていました！and
の理由は、これが無名関数として、またはコールスタックの一部として呼び出されたときに (いつの日か)、関数を識別できるようにするためです。これは、他の場所で適切な名前が付けられていても、潜在的に匿名のすべての関数が「名前付き」になることを確認して、習慣を身に付けるのに非常に便利な方法です。繰り返しになりますが、優れた JavaScript メンターは、人々を助けることを提案します ;-)。ガッ！他のことを説明するのを忘れていました！_keypressT_keypresst

同様に簡単にできることに注意してください：

function doThing() //some pre-defined function before our code

var KeypressFunctions = [];
KeypressFunctions['T'.charCodeAt(0)] = doThing
KeypressFunctions['t'.charCodeAt(0)] = doThing

次に、T または t に対して doThing 関数が実行されます。関数の名前を渡しただけで、関数を実行しようとしなかったことに注意してくださいdoThing()(これは大きな違いであり、この種のことを行う場合の大きなヒントです)。

これを忘れたなんて信じられない！

パート 5: jQuery:

今日は jQuery に重点が置かれているため、jQuery ライブラリが読み込まれた後、アプリ内の任意の場所 (ヘッド、ボディ、フッターなど) に配置できるブロックを次に示します。

<script>
  function doTheThingsOnKeypress(event){
    //do things here! We've covered this before, but this time it's simplified
    KeypressFunctions[event.which].call();
  }

  $(document).on('keypress','selector',doTheThingsOnKeypress);
  // you could even pass arbitrary data to the keypress handler, if you wanted:
  $(document).on('keypress','selector',{/* arbitrary object here! */},doTheThingsOnKeypress);
  //this object is accessible through the event as data: event.data
</script>

以前の as を使用する場合は、KeypressFunctionsこの前に実際に定義されていることを確認してください。

于 2013-01-10T16:09:43.897 に答える
9

onkeydownイベントとkeyCodeプロパティを使用します (Tコードは 84 です)。

document.onkeydown = function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(key===84){
        example();
    }
}

プロパティの代わりにaddEventListener/メソッドを使用することをお勧めしますattachEventonkeydown

編集: TJ Crowder が要求したように、互換性チェックを含むaddEventListener/の使用法は次のとおりです。attachEvent

var addEvent = document.addEventListener ? function(target,type,action){
    if(target){
        target.addEventListener(type,action,false);
    }
} : function(target,type,action){
    if(target){
        target.attachEvent('on' + type,action,false);
    }
}

addEvent(document,'keydown',function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(key===84){
        example();
    }
});

キーコードのリストについては、このページを確認してください

于 2013-01-10T15:17:54.750 に答える
2
  1. keyup/down/press イベント ハンドラーをオブジェクトにバインドしdocumentます。
  2. どのキーが押されたkeyかkeyCodeを確認します (イベント オブジェクトを見て、
  3. 必要なキーに一致する場合は関数を呼び出します

スクリプトが実行される場所は関係ありませんdocument。オブジェクトは (事実上) 常に利用可能です。

于 2013-01-10T15:15:19.870 に答える