Javascriptで連続したキーの押下検知

Question

画面内で検索用のテキストボックスを作成しています。特定のキーを押すことで、そこへフォーカスを持ってきたいのですが、ctrl+F だと、ブラウザの検索窓が表示されてしまいます。
そこで、ctrlキーを連続して二回押すと、そのテキストボックスへフォーカスするようにしたいのですが、適当なjqueryのプラグイン等が見つからず、自作しようと考えています。
考え方として、最初にキーが押されたら発火して、規定秒以内に同じキーが押されたらフォーカスをあてる。それだけかなと思うのですが、最初にキーが押されたら状態を、どう保持していいのかわかりません。
ご教示頂ければ幸いです。

Answer 1

最初とか2回めとか判別して分岐するより、押すたびに時刻を記録して前回押してから何ms経ったかによって処理したほうがシンプルにできそうです。

・前回の時刻を取得
・現在と比べる
・nミリ秒以下なら処理
・今回の時刻を記録（上書き）

Comments

[think49]

賢い方法だと思います。
補足ですが、単純に [Ctrl] キーだけ記録すると、[Ctrl] -> [C] -> [Ctrl] でも反応してしまうので「直前のキー」を記録する必要がありそうですね。

[hanzoumon]

早速のご回答、有難う御座います。tozjpさんのやり方を参照させて頂き、無事に目的のものが出来ました。think49さんのご指摘についてはごもっともかと。ただ今回は手抜きさせて頂き、その部分の制御は付けませんでした。200ms間隔で処理しているので、ctrl＋Cからの、ctrlはあまり気にしなくてもいけそうでした。
有難う御座いました！

[think49]

うーん…。var inputTime に [Ctrl] キー入力時刻を記録したとして、直前のキーが [Ctrl] でなければ inputTime = null; のように初期化すれば済むと思うのですが、省略する意味があったのでしょうか。

Answer 2

クロージャと即次関数を利用して、外部から変数の変更を禁止します。DEMO

(function(){
  var timeout= 1000// ms

  // タイマー、入力キーのキャッシュ
  var timeoutId= null
  var previousKey= null
  addEventListener('keydown',function(event){
    // 入力キーを記憶する
    if(previousKey!==event.keyCode){
      previousKey= event.keyCode

      // 時間超過で入力キーをクリア
      clearTimeout(timeoutId)
      timeoutId= setTimeout(function(){
        previousKey= null
      },timeout)
    
      return
    }
    previousKey= null// 再度、二重入力できるようにクリア
    
    // 以下、二重入力時の処理…
    alert(event.keyCode)
  })
})()

Comments

[hanzoumon]

ご回答有難う御座います。クロージャ、勉強になりました。また、コードまで載せて頂き非常にたすかりました。1番の方と合わせて参考にさせて頂きました。
有難う御座いました！