10

ログインドロップダウンの最初の入力フィールドにフォーカスを合わせることに問題があります。モーダル関数とドロップダウン関数のみを使用して、jquery1.7.2とブートストラップ2.1.1を使用しています。どちらもうまく機能します。私は、JSではなくデータターゲットを介してドロップダウンとモーダルを呼び出します。

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

ブートストラップから表示されたイベントは発生しないため、正常に発生するjQuery on（）イベントを実行しました。私のセレクターは正常に動作します。コンソールで他のメソッド（hide（）とshow（））を使用してテストし、同じフィールド（id #j_username）または（$（ "＃fields input：first "）。

イベントは正しく発生しますが、入力フィールドにフォーカスを取得する方法はありません。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>

4

3 に答える 3

11

クリックイベントが発生したため、フォームはまだレンダリングされていません。また、そのようなイベントをBootstrapドロップダウンに追加する予定はありません。

これを回避する簡単な方法は次のとおりです。

$("#loginlnk").on('click', function(){
    console.log("FIRE");
    var x = setTimeout('$("#j_username").focus()', 700);
});
于 2012-10-20T16:05:30.777 に答える
4

次のように、ドロップダウンIDと入力テキストボックスIDでshownイベントを使用できます。accessdropdowninputEmail

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

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

})
于 2015-06-02T10:14:07.793 に答える
1

もう少し一般的：

$(document.body).on('shown.bs.dropdown', function () {
    $("[autofocus]", this).focus();
});

次に、通常どおり、ドロップダウンの要素のautofocus属性を使用します。input

于 2018-06-14T10:55:37.547 に答える