2

ページの読み込み時にフォーカスを入力要素に設定しようとすると、特定の状況で Firefox で失敗します。コードは次のとおりです。

:focus {
    outline: 3px solid #ff0000;
}

<script type="text/javascript">
    function setFocus() {
        document.getElementById('input-id').focus();
        document.getElementById('input-id').select();
        console.log(document.activeElement);
    }
</script>

<body onload="setFocus()">
    <div><input id="input-id" type="text" value="Waiting for focus..." onfocus="console.log('Received focus!')" /></div>
</body>

ここで試してみてください: http://jsfiddle.net/johnericsutton/p6VhQ/。アイデアは、ページが読み込まれると入力要素がフォーカスを取得する (そしてテキストが選択される) という単純なものです。

次の状況では、Firefox で動作します。

  • カーソルを URL バーに置き、Enter キーを押します。
  • 入力テキストにカーソルを置いて Enter キーを押すか、リロード ボタンを押すか、Ctrl-R (Windows と Linux では、Mac では Cmd-R) を押します。

ただし、URL バーにカーソルを置いて再読み込みボタンを押すか、Ctrl-R (Windows と Linux では、Mac では Cmd-R) を押すと、Firefox では機能しません。console.log から、DOM が activeElementが入力であると認識していることがわかりますが、これは 2 つの意味で当てはまりません。

  • CSS 入力セレクターはアクティブ化されていません。
  • 入力要素がフォーカス イベントを受け取っていません。

そのため、ユーザーが URL バーをクリックしてリロードを押すのではなく、URL バーをクリックしてリロードを押すか、URL バーをクリックしてEnter キーを押します。なんて混乱！

Firefox とは、次のことを意味します。

  • Linux および Mac では FF15。
  • Windows および Linux では FF10。
  • Windows 上の FF9。

私が試したすべてのバージョンの Chrome と Safari で問題なく動作します。

私が持っている唯一の「解決策」は、.focus() の前に alert() を導入することです。あまり満足できません！アラートには何を入れますか? 「Firefox のバグの回避策です。OK を押してください!」.

感謝して受け取ったより良いアイデア:)

4

1 に答える 1

-1

window.focus(); で初期化します。アドレスバーからフォーカスを押し出しているようです。

于 2013-05-01T19:44:28.333 に答える