[JavaScript] FireFoxのキーボードショートカットを無効にすることは可能なのか?

質問の要点は、JavaScriptでFireFoxのキーボードショートカットキーの機能の一部、又は全部無効にすることは可能なのか?という質問になります。

下記のコードは、アルファベット文字列　"It's"　を<p id="target"></p>の中に表示し、その文字列をPCキーボードよりタイプして、タイプしたものは、順次アンダースコアに変換していくように書かれています。

GoogleChomeブラウザでは、問題なく作動しますが、FireFoxブラウザでは、It's のアポストロフィーの部分の入力の入力で、[shift]+[']と押したときに、ブラウザの機能のクイック検索バーを出すショートカットキーと重なり、これが開き邪魔をしてアポストロフィーを入力が困難になります。そこで、タイピング中は、この機能を無効にしたいのですが、javascriptで可能なのでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Typing Game!</title>
  <style>
  body {padding-top: 40px; font-family: 'Courier New', sans-serif; text-align: center;} #target {font-size: 48px;letter-spacing: 3px;}
  </style>
</head>
<body>
  <p id="target"></p>
  <script>
  (function() {
    'use strict';
    
    var a =
    [
     {key: '73', value: 'I', shift: true},
     {key: '84', value: 't', shift: false},
     {key: '55', value: '\'', shift: true},
     {key: '83', value: 's', shift: false}
    ]

    var aLength = a.length;
    var currentWord = 'It\'s';
    var currentLocation = 0;
    var target = document.getElementById('target');
    target.innerHTML = currentWord;
    var currentShift;
    var aValue;

    window.addEventListener('keyup', function(e) {

      for (var j = 0; j < aLength; j++) {
          if(a[j].value == currentWord[currentLocation]){
          currentShift = a[j].shift;
          }
      }

      for (var j = 0; j < aLength; j++) {
          if(a[j].value == e.key && a[j].shift == e.shiftKey){
          aValue = a[j].value;
         }
      }

      if (aValue == currentWord[currentLocation]){

        currentLocation++;
        var placeholder = '';
        for (var i = 0; i < currentLocation; i++) {
          placeholder += '_';
        }
        target.innerHTML = placeholder + currentWord.substring(currentLocation);

        if (currentLocation === currentWord.length) {
          alert("finish!")
        }
      }
    });

  })();
  </script>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

一応keydownイベントを殺せばショートカットキーも無効化されました(FireFox).

JavaScript
1window.onkeydown = e => e.preventDefault();

NOTE:
ただこのままですとWEBページ上の全てのキー入力が無効となるっぽいので, 何らかのエスケープ処理を入れませんと非常に使いにくいWEBページになってしまう気がします.

投稿2017/12/07 11:04

defghi1977

総合スコア4756

xjaPANDA

2017/12/07 12:12

ありがとうございます。文字列を進むなかで、前もって、アポストロフィーの手前の文字に来たときだけに条件分岐で適用させてみます。

xjaPANDA

2017/12/07 12:16

if(currentWord[currentLocation + 1] =='\''){ window.onkeydown = e => e.preventDefault(); }　とすることで、一文字の間だけ無効化しました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

[JavaScript] FireFoxのキーボードショートカットを無効にすることは可能なのか?

関連した質問