Android - 打开软键盘时 html 输入失去焦点 (ASP.net)

Question

我在 ASP.net 中编写了一个网页登录表单。

使用 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);
});

Answer 1

我发现这与 ASP.net 或 ViewState 无关。

当 Android 键盘出现时，浏览器窗口被调整大小 - 触发 resize 事件。

我正在运行类似于以下内容:

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

这移动了 DOM 中的导航。我猜这会重绘 DOM，因此会导致 DOM 中的任何内容失去焦点。我在调整大小时阻止了这种情况发生 - 使它只在初始页面加载时发生。