2009-08-25 14 views
15

jQueryを使用してwebappを開発しています。 3行の入力フィールドの新しい行を追加する機能があります。これらのDOM要素を作成した後、入力フィールドの1つにフォーカスを当てたいと思います。私は必要な入力フィールドにjQuery focus()関数を呼び出すことでそれをやっています。jQuery focus()がIE8で動作しない場合があります

問題は、IE6とFF3.5ではfocus()を呼び出してもうまく動作しますが、IE8では動作しません。

私はここにこの問題を示すための簡単な作業例を作ろうとしていましたが、コードfocus()のストリップバージョンがうまくいきました。 IE8でfocus()を呼び出すとDOMがまだ準備されていないと思います。このため、私はsetTimeout( 'myFocus()'、400)を呼び出してみました。私は成功を収めましたが、焦点の一部は実際には機能していましたが、必ずしもそうではありません。無作為に入力フィールドにフォーカスを当てません。

質問:誰も同じような問題に直面しているのですか?どのように解決策を講じるのですか? setTimeoutを使用すると、非常に醜い回避策のように感じます。事前

TNXは編集:2009年8月26日

は、簡単な例に再現することに成功しました。 IE8でこのバグを再現するHTML + JSコードです。再現する

<html> 
<head> 
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript"> 
     function performChanged() { 
      formChanged = true; 
     } 

     function handleChange() { 
      var parentDiv = $('#container'); 
      newValue = $(html).html(); 

      parentDiv.html(newValue); 
      $(".sel1",parentDiv).bind('change',handleChange); 
      //alert('Uncomment this and after alert focus will be on input'); 
      $("input.cv_values",parentDiv).focus(); 
     } 

     $(document).ready(function() { 
      $('.trackChange').bind('change', handleChange); 
     }); 
     var html = '<div class=\"div1\">\n<select class=\"sel1\" id=\"sel1\" name=\"sel1\"><option value=\"\"><\/option>\n<option value=\"11\">Select me to see problem<\/option>\n<\/select>\n\n\n<input class=\"cv_values\" id=\"sel3\" name=\"sel3\" size=\"30\" type=\"text\" value=\"\" /><br/>Focus should in input field. With alert it is but without alert focus is not there</div>'; 
    </script> 
</head> 
<body> 
    <select class="trackChange" onchange='performChanged();'> 
     <option value=""></option> 
     <option value="1" >Select me to generate new inputs</option> 
    </select> 

    <div id="container"></div> 
</body> 

: 1)最初のドロップダウンから選択値。最初の入力が機能していることがわかります 2)2番目のドロップダウンから値を選択してください。バグが再現されていることがわかります。

コードでは、JS alert()が表示されている行をコメントアウトすることができます。奇妙なことは、このアラートがある場合()、その後はフォーカスがうまくいきます。

これは私の問題がどこにあるかを理解するのに役立ちます。

P.S.私のアプリはこのように動作する必要があります - ドロップダウンから値を選択した後、それらの入力を再生成しています。これは私のアプリの単純な例です;)。あなたが使用している任意のコードを投稿していないので

+1

コードスニペットを投稿してください。物事を楽にする。 – krishna

+0

あなたは "DOMContentLoaded"、a.k.a. - 'document.ready(...)' - ではなく、ウィンドウの "load"イベントに焦点を当ててみましたか? – kangax

答えて

6

不思議私は同じ問題を抱えていたので、のような昔ながらのjavascriptを使用してそれを解決:jQueryの同等$('#friend_name').focus();を使用して

document.getElementById('friend_name').focus();

はIE8で動作しませんでした: -/

+3

これはjQueryの基盤に報告したいかもしれないものです。 – Fresheyeball

1

:HTMLがロードされた後、これにはJavaScriptの実行を行います

$(document).ready(function(){ 
    //code here 
}); 

また、live eventsも使用する必要があります。 domに入力を追加すると、自動的にフォーカスがバインドされます。

$("p").live("focus", function(){ 
    alert($(this).text()); 
}); 

これは、作成されたすべてのpにはバインドされたフォーカスがあることを意味します。

+0

私はいくつかの入力を集中したいと思いますが、そのフォーカスイベントを認識する必要はありません。 S. jQueryの現在の安定版は "フォーカス"イベントのライブをサポートしていません。 – oskarae

30

私のアプリにも同様の問題がありましたが、コードにフォーカスの問題が再現できません。私の問題は、私のページにリンクハッシュがあって、IEが自分の要素に焦点を当てていないという点で、少し違っていました。ユーザーが

setTimeout(function() { 
    $('.my-thing').focus(); 
}, 100); 

顕著ではありませんが、それはIEに息をする瞬間を与える:

はとにかく、問題を回避するために、私はタイムアウトを追加しました。

+0

このソリューションがなぜ機能するのか知っていますか? (ああ、ありがとう、間違いなく動作します。) – jjnguy

+0

私はこれがなぜうまくいくのかにも関心があります。 – kukudas

+1

いくつかの[古代のドキュメント](http://javascript.gakaa.com/div-focus-4-0-5-.aspx)から:テキストボックスにフォーカスを与え、ボックス内のすべてのテキストをあらかじめ選択するには、要素のfocus()およびselect()メソッドのシーケンスウィンドウの変更後(アラートダイアログボックスの終了後など)にこのシーケンスを実行する場合は、メソッドを別の関数に配置し、ダイアログのalert()メソッドに続いてsetTimeout()メソッドを使用してこの関数を呼び出します。これにより、IE/Windowsは文の実行を正しく処理できます。 – davidchambers

4

IE8と同様の問題がありました。ダイアログを開いたときにダイアログに入力を集中させたいと思っていました。使用されるautoOpen = false。フォーカスがダイアログの最初のフォーカス可能な要素に対してのみ機能しないことに気付きました。 setTimeoutを試しましたが、時にはうまく機能しませんでした。焦点を合わせる前にぼかし要素が私を助けました。

$('#dialog').find('#name').blur(); 
$('#dialog').find('#name').focus(); 
+0

ありがとう!遅れが助けにならないとき、それはまさに人が必要とするものです。 – Episodex

1

このフォーカスを設定するための最善の解決策です:

$( '。elt')。f adeIn(200、function(){$( '。elt')。focus();});

$("elem").blur(); 
$("elem").focus().focus(); 

を、なぜ私は見当がつかないが、何とか呼び出し焦点は二回に沿ってIEを支援します。Kazysのソリューションと連携して

8

は、私は、これは(IE8 & .HTAファイルを使用して)すべての私の問題を解決することが判明しました。

EDIT: 私は、.show()と.select()を呼び出すことも役に立ちます。

+0

'$(" id ")。focus()。focus();'は私のために働く、 @Max Mayhem – bumbumpaw

+0

私がまだ知っていることはありません。 –

+0

IE11でも私のために修正されました!ありがとう:) – Krenor

0

これは古い質問ですが、検索ではトップですので、更新したいと考えています。

修正された時間があったかどうかはわかりませんが、今日、IE11でjquery-2.1.3を使用してこの問題に直面しました。私は、上記のPonnyによって設定されたように、フォーカスをsetTimeoutにラップすることが私にとって最も効果的であることを発見しました。

場合によってはタイムアウトを増やして動作させる必要がありました。

関連する問題