文書レベルのonkeydownイベントでHTML要素に焦点を合わせる

Question

「p」キーを押すと、特定のテキストボックスにフォーカスが欲しい。 Iドン入力、に私は「P」を押すと、入力フォーカスを受け取るん

document.onkeydown = function(e) { 
    // e.preventDefault(); 
    switch (e.key) { 
     case 'p': { 
      document.getElementById('test').focus(); 
      break; 
     } 
    } 
} 

を、それはまた、タイプ文字「P」：これを行うには、私は、ドキュメント上にonKeyDownリスナーを設定しました欲しい。空のテキストボックスに注目したいだけです。 e.preventDefaultをリスナーに追加しようとすると、 'p'が表示されなくなりましたが、テキストボックスに何も入力しなくなってしまいました。

ショートカットキーを入力せずにテキストボックスにフォーカスするにはどうすればよいですか？可能であれば、私は純粋なJavaScriptでこれを達成したいと思います。

はここJSFiddleだ：要素がまだフォーカスされていない場合はhttps://jsfiddle.net/qau6woL6/

Answer 1

のみフォーカスを変更します。さらに、フォーカスを変更している場合は、デフォルトを防ぐだけです。これにより、最初にpを使用してフォーカスを設定した後に、pを<input>に入力することができます。

document.onkeydown = function(e) { 
 
    var desiredEl = document.getElementById('test'); 
 
    if(desiredEl.contains(document.activeElement)){ 
 
     return; 
 
    } 
 
    switch (e.key) { 
 
     case 'p': { 
 
      e.preventDefault(); 
 
      if(window.InstallTrigger){ 
 
       //Is Firefox 
 
       //Use setTimeout to work around a Firefox bug that prevents input 
 
       // if the focus is set here directly. Only noticed in Stack Overflow's 
 
       // snippet environment. Did not show up in JSFiddle. Not seen on 
 
       // Chrome. If the 250ms delay (100ms does not work) is unacceptable, 
 
       // then some other workaround can be found. Can shave to 200ms, but 
 
       // the minimal time required is undetermined. If that time varies by 
 
       // system performance is unknown. Bug seen on FF48.0.2 Win10x64. 
 
       setTimeout(function(){ 
 
        desiredEl.focus(); 
 
       },250); 
 
      } else { 
 
       desiredEl.focus(); 
 
      } 
 
      break; 
 
     } 
 
    } 
 
} 
 
        

<input id="test"></input>

^{Firefoxの問題：Pが入力され、フォーカスがすぐにdesiredEl.focus();で変更された場合は、フォーカスが設定されますが、何のキーボード入力が可能ですされません。 <input>にコンテンツが既に存在し、フォーカスが他の場所に移動された場合は、pのキーボード入力を入力すると返されます。}

Answer 2

フィールドをフォーカスした後にreturn falseを追加します。コメントの中で指摘されているように、これは、フォーカスされていてもpがフィールドに入力されることを防ぐでしょう。したがって、フォーカスのチェックも必要になる可能性があります。

document.onkeydown = function(e) { 
 
    switch (e.key) { 
 
    case 'p': 
 
     { 
 
     var test = document.getElementById('test'); 
 
     if (document.activeElement !== test) { // Make sure it isn't focused already 
 
      test.focus(); 
 
      return false; 
 
     } 
 
     } 
 
    } 
 
};

<input id="test" />