バックグラウンド画像を変更するときにキーボードフォーカスをテキストフィールドに保持

Question

次のコードを使用して、着陸スクリーンの背景画像を変更しています。

window.onload = function() { 
setTimeout(changeBackground, 1000); 
}; 
var currentBackground = 0; 
var backgrounds = []; 
backgrounds[0] = '<?php echo base_url(); ?>images/background.png'; 
backgrounds[1] = '<?php echo base_url(); ?>images/background2.png'; 
backgrounds[2] = '<?php echo base_url(); ?>images/background3.png'; 
backgrounds[3] = '<?php echo base_url(); ?>images/background4.png'; 
function changeBackground() { 
    currentBackground++; 
    if(currentBackground > 3) currentBackground = 0; 

    $('body').fadeOut(0, function() { 
     $('body').css({ 
      'background-image' : "url('" + backgrounds[currentBackground] + "')" 
     }); 
     $('body').fadeIn(0); 
    }); 


    setTimeout(changeBackground, 3000); 
} 

すべてがうまくいきます。しかし、Internet Explorerでは、テキストボックスにユーザー名を入力しようとすると、背景画像が変更されると、テキストフィールド内のフォーカスが失われ、背景イメージが変更されるたびにクリックする必要があります。

誰でもこれを克服する方法を教えてください。

Answer 1

背景が変わるたびにフォーカスを明示的に設定することでこれを克服できます。 （多分それは最後の行をする必要があります...）あなたのchangeBackground()関数に次の行を追加します。

document.getElementById("...ID of text box...").focus();

クマを念頭に置いて、これは背景が変更前にフォーカスが意図的に変更された別の問題を引き起こす可能性があります。これが可能であれば、本当にしたいのは、バックグラウンドが変更された時点でどの要素がフォーカスを持っているかを検出し、その要素に明示的に設定するよりも保持しておくことです。これはdocument.activeElementコマンドを使用して行われます。