2012-10-20 31 views
6

ログインドロップダウンで最初の入力フィールドにフォーカスを当てる際に問題があります。 jquery 1.7.2とbootstrap 2.1.1をモーダル関数とドロップダウン関数だけで使用しています。 両方とも素晴らしいです.JSではなくデータターゲットを通じてドロップダウンとモーダルを呼び出します。Twitterのブートストラップドロップダウン入力フィールドがフォーカス()メソッドで動作しない

私は何時間も努力して答えを探していましたが、ドロップダウンが表示されたときに最初の入力フィールド(#j_username)でフォーカスを得る方法が見つかりませんでした。

ブートストラップの表示されたイベントは発生しません。そのため、jQuery on()イベントを実行しました。 私のセレクタはうまく動作しています。他の方法(hide()とshow()、および同じフィールド(id #j_usernameまたは$( "#fields fields:最初の ")。

正しくイベントが発生しますが、フォーカスを得るための入力フィールドを取得する方法はありません。 私はHTML5のオートフォーカスプロパティを試みたが、どちらか動作するようには思えない。

任意のアイデア?ありがとう予め

にハンドラ関数onPageReady()の一部である。

$("#loginlnk").on('click', function(){ 
console.log("FIRE"); 
$("#j_username").focus(); 
}); 

<span class="span-dropdown"> 
    <button class="dropdown-toggle btn grey" role="button" id="loginlnk" data-toggle="dropdown" href='#'>Login</button> 
    <div class="dropdown-menu auth" role="menu" id="signin" aria-labelledby="loginlnk"> 
    <form-login action="/j_spring_security_check" method="POST" always-use-default-target='false' default-target-url="/home.do" authentication-failure-url="/welcome.do" /> 
    <div class="dropdown-caret right"> 
     <span class="caret-outer"></span> 
     <span class="caret-inner"></span> 
    </div> 
    <div id="fields"> 
     <div id="username">Enter your email address 
     <input class="inputs login" autofocus="autofocus" id="j_username" name="j_username"> 
      </div> 
      <div id="password">Password 
      <input class="inputs login" id ="j_password" name="j_password" type="password" > 
      </div> 
    </div> 
    <div id="submit"> 
     <button class="btn mapit" id="signinbtn" type="submit" value="Login" onClick="login(1)" tabindex="102">Login</button> 
    </div> 
    <div id="links"> 
     <a id="pwdlnk" href="javascript:lostPwd();">Lost your password?</a>   
    </div> 
    <div id="lostpwd"> 
     Enter your email to receive recovery instructions. 
     <div class="container"> 
     <input class="inputs login" type="email" id="lost_username" tabindex="400"> 
     <button class="btn" id="lostpwdbtn" type="submit" value="" onClick="forgotPassword()" tabindex="401">Recover</button> 
     </div> 
    </div>     
</form-login> 

答えて

8

フォームは、クリックイベントが発生するとまだレンダリングされていません。そして、no plans to add such events to Bootstrap dropdownsがあります。

これを回避する簡単な方法は、次のように

$("#loginlnk").on('click', function(){ 
    console.log("FIRE"); 
    var x = setTimeout('$("#j_username").focus()', 700); 
}); 
+1

YES!ありがとうございました!!!すごくうまくいく! – ficho

+0

私はここにいくつかのよりよい解決策があると思います:http://stackoverflow.com/questions/12190119/bootstrap-modal-show-event/12218272#12218272 – jpeskin

+2

@jpeskin、これらの解決策はドロップダウンではなくモーダルに適用されます。 – mccannf

1

ドロップダウンID accessdropdownと入力テキストボックスID inputEmailshownイベントを使用することができます。

$('#accessdropdown').on('shown.bs.dropdown', function() { 

    $("#inputEmail").focus(); 

}) 
+0

素敵な、ありがとう! – sidonaldson

関連する問題