Chrome拡張機能 - ポップアップで最初のリンクが自動的にフォーカスされる

Question

popup.htmlの最初のリンクを自動的にフォーカスするGoogle Chrome拡張機能のデフォルト動作を停止するにはどうすればよいですか？おそらく、私はJSを使っていくつかのラウンドアバウトハックをしたり、フォーカスCSSを変更したりすることができますが、これが何か他のものを投げ捨てていると思います。

Answer 1

自動フォーカスを受けたくない要素にtabindex="-1"を追加するのが最も簡単な方法です（JavaScriptは無料です）。

Answer 2

おそらくオートフォーカスは便宜のために意図されていましたが、しばしば不快感を与えます。私は根本的な原因を止める方法がないので、いくつかの迂回路を見つけました。 1つはJavaScriptを使用しています。 Chromeは、ポップアップを表示してから少し遅れて自動フォーカスを設定します。 blur()でフォーカスを外すことは可能ですが、フォーカスをあまりに遅くすると瞬時に点滅し、早すぎると早すぎると何もしません。だから、非フォーカスする権利の時間を見つけることは容易ではなく、この解決策は、ポップアップが表示された後、第一、第二の間、これを数回行うことをしようとします。

document.addEventListener("DOMContentLoaded", function() { 
    var blurTimerId = window.setInterval(function() { 
    if (document.activeElement != document.body) { 
     document.activeElement.blur(); 
    } 
    }, 200); 
    window.setTimeout(function() { 
    window.clearInterval(blurTimerId); 
    }, 1000); 
}); 

別pure HTML solution =「1」にtabindex属性を追加することですボディータグ。

Answer 3

tabindex="-1"が私のために働いた。私はオートフォーカスを入力に追加していましたが、入力前に各リンクにこのtabindex="-1"属性を使用するまで機能しませんでした。

奇妙なことは言えません。 tabindex属性を持つ最初にフォーカスのある要素を口論

Answer 4

は使用して、おそらく行くには最高の方法です：

• tabindex="-1"、示唆されているように、焦点
• tabindex="1"を得ることから要素を防ぐために、ポール・フェレットによって示唆されているようにlink0ffによって、あなたの状況はより複雑であり、あなたが WANを行う場合フォーカス

で始めるべき要素を指定しますいくつかのJavaScriptをもたらすためにトン、私の代わりにタイムアウトをぼかすとき推測しようとしているのは、イベントでの初期フォーカスをリッスン、除き、link0ffのソリューションを使用することをお勧めしたい：

function onInitialFocus(event) { 
    // Any custom behavior your want to perform when the initial element is focused. 

    // For example: If this is an anchor tag, remove focus 
    if (event.target.tagName == "A") { 
    event.target.blur(); 
    } 

    // ALSO, remove this event listener after it is triggered, 
    // so it's not applied to subsequent focus events 
    document.removeEventListener("focusin", onInitialFocus); 
} 

// NOTE: the "focusin" event bubbles up to the document, 
// but the "focus" event does not. 
document.addEventListener("focusin", onInitialFocus); 

私はフォーカスを信じていませんイベントはキャンセル可能なので、イベントを抑制することはできません。

Answer 5

もう1つの簡単な方法（「タブロビリティ」を維持する）は、最初の実際のリンクの前に空のリンク（<a href="#"></a>）を追加することです。クロールからオートフォーカスを目に見えないように「キャッチ」しますが、リンクをタブで移動したいユーザーは引き続き正常に機能することができます。

このアプローチのわずかな欠点は、ループするときに2番目の「デッドタブ」が発生することです。つまり、ユーザーは最後のリンクから最初のリンクに戻るためにタブを3回押す必要があります。