16

ウィンドウ、ドキュメント、またはボディにアタッチされている場合、Javascript のフォーカス イベントとブラー イベントが Android ブラウザで正しく起動しないことがわかりました。

デスクトップ ブラウザでは正しく動作するが、Android ストック ブラウザ、Dolphin、Opera モバイルでは失敗する簡単なテスト スクリプトを作成しました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Focus test</title>

    <script type="text/javascript">

        window.onfocus = function() {
            document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
        };
        window.onblur = function() {
            document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
        };

    </script>
</head>

<body>
    <input id="test" name="test" />
    <div id="console"></div>
</body>

</html>

興味深いことに、フォーム入力がフォーカスされると、イベント ハンドラーが起動し、ぼかしが発生すると、blur イベント ハンドラーが 2 回起動します。

誰かがこれに対する良い解決策または回避策を持っていますか?

編集:期待される結果は、ブラウザーのタブを変更するか、別のアプリに変更すると、blur イベントが発生し、ブラウザーのタブに戻ると、フォーカス イベントが発生することです (これがデスクトップでの動作です)。 )

4

1 に答える 1

0

ジェリービーンを実行しているGalaxy Nexus（私が持っているすべて）でコードをテストしたところ、このコードは完璧に機能し、両方のイベントがそれぞれ1回しか発生しません。

document.getElementById('test').onfocus = function() {
    document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
};
document.getElementById('test').onblur = function() {
    document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
};​

ウィンドウをターゲットにしていた可能性がありますが、ほとんどのモバイル デバイスでは通常、それ自体を「ぼかす」ことはできません。独自のぼかしイベントとフォーカス イベントを報告するように、要素に直接要求してください。

編集: また、イベントリスナーを適用する前に、DOM の準備が整うのを待っていることを確認してください。

于 2012-10-04T20:58:24.407 に答える