2012-10-20 23 views
6

Oturum açma açılanmda ilk giriş alanma odaklanma ile ilgili bir sorunum var. Sadece modal ve dropdown işlevleriyle jquery 1.7.2 ve bootstrap 2.1.1 kullanıyorum. Her ikisi de harika çalışıyorlar, veri hedefiyle ve JS değil, açılır menüleri ve modaları çağırıyorum.Twitter bootstrap açılırken giriş alanı focus() yöntemi ile çalışma yapılmıyor

Saatlerce çalışıyorum ve her yerde cevap aramaya çalışıyorum, ancak açılır menü gösterildiğinde ilk girdi alanımı (#j_username) elde etmek için bir yol bulamıyorum.

Önyükleme olayından gösterilen olay tetiklenmiyor, bu yüzden iyi bir jQuery on() olayını gerçekleştirdim. Seçicim iyi çalışıyor, konsolu diğer yöntemlerle (hide() ve show() yöntemleriyle ve aynı alanı (ya da id #j_username) ya da ($ ("# alan girişi: ilk ").

doğru olay patlar ama odak kazanmak için giriş alanı için hiçbir şekilde. Ben HTML5 en otofokus özelliği denedim ama o da işe görünmüyor.

Herhangi bir fikir? teşekkürler peşin

işleyici işlevinin bir parçası onPageReady olan().

$("#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> 

cevap

8

Form, click olayı tetiklendiğinden henüz oluşmadı. Ve no plans to add such events to Bootstrap dropdowns vardır.

bu çevrede hızlı bir yolu aşağıdaki gibidir:

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

EVET! Teşekkür ederim!!! harika çalışıyor! – ficho

+0

Burada daha iyi çözümler bulunduğunu düşünüyorum: http://stackoverflow.com/questions/12190119/bootstrap-modal-show-event/12218272#12218272 – jpeskin

+2

@jpeskin, bu çözümler açılırlar değil modellere uygulanır. – mccannf

1

Sen açılır kimliği accessdropdown ve giriş metin kutusu id inputEmail ile shown olay kullanabilirsiniz:

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

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

}) 
+0

Güzel, teşekkürler! – sidonaldson