JavaScript：入力要素のフォーカスを設定したときのInternet Explorerの表示エラー

Question

これは、JavaScriptとInternet Explorerのさまざまなバージョンで長年取り組んできた中で最も曖昧なバグです。私たちはいくつかの（非）便利な方法にYUI 2.7を使用しています。一口、jQueryのためにやるべきこと....

これはInternet Explorer 6とInternet Explorer7に影響します。 Internet Explorer 8は正しく動作します。他のすべてのブラウザも適切に動作します。

問題：私は特定の要素に焦点を当てて設定すると、私は次のエラーを取得する：

Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept focus. 

だから私は、入力要素が含まれている「を追加 - コメントログインオーバーレイ」と呼ばれるdiv要素を持っています。このdivは、ユーザーが 'login'と呼ばれるいくつかのリンクの1つをクリックするまでdisplay：noneです。

DOM内の 'add-comment-login-overlay'の位置を移動し、display：blockを設定し、次にフォーカスを設定する 'login'リンクを選択するJavaScriptコードですオーバーレイの最初の入力フィールド。私が上で書いたエラーを引き起こしているのは、フォーカスを設定するこのプロセスです。

//Get Login links in comment forms. 
links = YAHOO.util.Dom.getElementsByClassName('addCommentLoginLink'); 

//Set click event for login links. 
YAHOO.util.Event.addListener(links, "click", function(el){ 

    //Stop link. 
    YAHOO.util.Event.preventDefault(el); 

    //Move login overlay in DOM. 
    if(el.srcElement){ 
     var target = el.srcElement; 
    }else{ 
     var target = el.currentTarget; 
    } 

    YAHOO.util.Dom.insertAfter(overlay, target.parentNode.parentNode.parentNode.parentNode); 

    //Set to visible. 
    YAHOO.util.Dom.setStyle(overlay,'display', 'block'); 

    //Set focus to username field. 
    document.getElementById('add-comment-login-overlay-username-input').focus(); 
}); 

オーバレイのdivが完全に表示されていることは絶対に確認できます。私はそれを見ることができます。私は何が起きているのかを測定するためにsetIntervalタイマーを追加しましたが、何の効果もありません。ある時点で、オーバーレイが表示されてから、focus()が呼び出されてからエラーが発生するまでに、10秒間が経過しました。エラー以外にも、このエラー以外のフォームは完全に機能しています。

これは、オーバーレイHTMLコードを単純化したものです。

<div id="add-comment-login-overlay" class="add-comment-login-overlay" style="display: block;"> 
    <div class="add-comment-login-overlay-content clearfix"> 
     <div class="add-comment-login-overlay-signin clearfix"> 
      <input type="text" tabindex="2001" id="add-comment-login-overlay-username-input"/> 
      <input type="password" tabindex="2002" id="add-comment-login-overlay-password-input"/> 
     </div> 
    </div> 
</div> 

Answer 1

これは、IEのちょっとしたバグです（これは8で修正されていることを知ってうれしいです）。私は公式の原因を知らないが、私はそれはIEが実行コンテキストが完了するまでDOMを塗り替えていないとしなければならないと信じて、それはそれはまだ隠さだと思っている間その間要素focus()にしよう：

function calledAtSomePoint() { // begin execution 

    // ... 

    element.style.display = ''; // show container 
    input.focus(); // IE thinks element is hidden 

    // end of execution, IE repaints the DOM but it's too late 
} 

The solution is to use setTimeout：

setTimeout(function() { 
    document.getElementById('add-comment-login-overlay-username-input').focus() 
}, 0) 

私はそれがjQueryのを含む、多くの-A-時間が起こる持っていました。どのライブラリにも問題はありません。 setTimeoutは、いつも私の周りに働いてきました。

Answer 2

try/catchブロックでフォーカスを設定します。

Answer 3

私は、insertAfter呼び出しがIE DOMを混乱させると言いたいと思います。 insertAfterコールを使わずにコードをテストできますか？同じように失敗しますか？そうでない場合、同じ結果を達成する別の方法がありますか？おそらくノードをコピーするのではなく、ノードをコピーしてオリジナルを削除するのでしょうか？