20

ASP.net で Web ページのログイン フォームを作成しました。

Nexus 4、ストック Android 4.2.1、ネイティブ Chrome ブラウザを使用して、<input>フィールドをクリックすると、ソフト キーボードが表示され、フィールドがすぐにフォーカスを失います。<input>実際にテキストを入力するには、キーボードが既に開いている状態でフィールドをもう一度クリックする必要があります。

これは、デスクトップ上の Chrome では発生しません。

ASP ユーザー コントロールに次のログイン フォームがあります。

<asp:Login ID="login_form" runat="server" OnLoginError="OnFail" OnLoggedIn="OnLoggedIn" RenderOuterTable="false" RememberMeSet="True">
    <LayoutTemplate>

        <asp:Panel runat="server" DefaultButton="LoginButton" CssClass="members-login">
            <fieldset>
                <label for="UserName">Username</label>
                <asp:TextBox ID="username" placeholder="e.g. joebloggs12" runat="server"></asp:TextBox>

                <label for="Password">Password</label>
                <asp:TextBox ID="password" runat="server" placeholder="e.g. 1234" TextMode="Password"></asp:TextBox>

                <label id="RememberMe">Remember me</label>
                <asp:CheckBox ID="RememberMe" runat="server" />

                <asp:Button CssClass="button" ID="LoginButton" runat="server" CommandName="Login" Text="SUBMIT" />
            </fieldset>
        </asp:Panel>         
    </LayoutTemplate>
</asp:Login>

ブラウザには次のように表示されます。

<div class="members-login" onkeypress="javascript:return WebForm_FireDefaultButton(event, &#39;ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton&#39;)">

    <fieldset>
        <label for="UserName">Username</label>
        <input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$username" type="text" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_username" placeholder="e.g. joebloggs12" />

        <label for="Password">Password</label>
        <input name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$password" type="password" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_password" placeholder="e.g. 1234" />

        <label id="RememberMe">Remember me</label>
        <input id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_RememberMe" type="checkbox" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$RememberMe" checked="checked" />

        <input type="submit" name="ctl00$ctl00$ctl00$ContentPlaceHolderDefault$contentBody$masterContent$login_form$LoginButton" value="SUBMIT" id="ContentPlaceHolderDefault_contentBody_masterContent_login_form_LoginButton" class="button" />
    </fieldset>
</div>

私の疑いは、ViewState がどういうわけかフォーカスを盗んでいるということです。event.stopPropogation()しかし、私は役に立たなかったものを試しました。

一時的な修正

今のところ<input>、クリック後 700 ミリ秒で強制的に要素にフォーカスを戻すというハッキーな修正に落ち着きました。

jQuery('input').bind('click',function(evt) {
    var focusClosure = (function(inputElem) {return function() {console.log(inputElem.focus());}}($(evt.target)));
    window.setTimeout(focusClosure, 700);
});
4

6 に答える 6

43

これはASP.netやViewStateとは何の関係もないことを発見しました。

Androidキーボードが表示されると、ブラウザウィンドウのサイズが変更され、サイズ変更イベントがトリガーされます。

私は次のようなものを実行していました：

// Move the navigation on resize
$(window).bind('resize', function() {
    if(maxWidth <= 710px) {
        $('.nav').after($('.main-content'));
    }
});

これにより、DOMのナビゲーションが移動しました。これによりDOMが再描画されるため、DOM内のすべてのフォーカスが失われると思います。サイズ変更時にこれが発生しないようにしました。代わりに、最初のページの読み込み時にのみ発生するようにしました。

于 2013-02-13T15:31:59.740 に答える
9

同様の問題がありました。入力がフォーカスされている場合に実行するサイズ変更を防ぐ私のアプローチは問題を解決しました:

$(window).bind('resize', function() {
    if ($("input").is(":focus")) {
        // input is in focus, don't do nothing or input loses focus and keyboard dissapears
    } else {
        // do whatever you should do if resize happens
    }
});
于 2015-11-25T20:41:39.260 に答える
4

私は他の解決策を見つけました

まず、関数を作成する必要があります

function getFocus(campo){
    $(window).bind('resize', function() {
        if(windowWidth <= 1025) {
            $(campo).focus();
        }
    }); 

}

入力をクリックすると、関数が呼び出されます

$('input').click(function(){
    getFocus(this); 
});

これは私のために働く

于 2015-10-07T09:22:58.723 に答える
0

WordPress でこの問題に直面している場合は、次のコードをヘッダーに挿入してください。

<script type="text/javascript">
 jQuery(function($) {
 $(window).bind('resize', function() {
 if ($("input").is(":focus")) {
 var focusClosure = (function(inputElem) {return function() 
 {console.log(inputElem.focus());}}($(evt.target)));
window.setTimeout(focusClosure, 700);
 } else {
    // Other resize functions
}
}); 
});
</script>
于 2018-02-02T10:07:49.280 に答える