安卓——软键盘弹出时HTML输入框失焦（ASP.net）

Question

我用ASP.NET编写了一个网页登录表单。

在使用Nexus 4，搭载原生Android 4.2.1系统的Chrome浏览器时，当我点击 标签时，软键盘会弹出，然后该输入框立即失去焦点。我必须再次点击已经打开的键盘才能输入文本。

在桌面版的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()，它没有起作用。

---

临时解决方案

目前我已经采用了一个hacky的解决方法，点击后强制将焦点返回到<input>元素，延迟700毫秒：

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

- Robin Winslow

---

我发现了一些类似的问题，但这些都似乎是与Java相关的 - 在本地应用程序中。我找不到任何其他关于网页中出现此问题的提及。 - Robin Winslow

Answer 1

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

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

我在运行类似以下代码：

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

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

- Robin Winslow

---

答案是救星。注意：根据我的经验，在Android 4.0.4上，此问题影响原生浏览器，但不影响其他浏览器（Chrome，Firefox，可能还有其他浏览器）。 - Steve Schneider

Answer 2

我遇到了类似的问题，我的解决方法是在输入框获取焦点时阻止调整大小，这样就解决了问题：

$(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
    }
});

- Moebius

---

如果您有新的问题，请通过单击提问按钮来提出。如果它有助于提供上下文，请包含此问题的链接。- [来自审查] (/ review / low-quality-posts / 10812017) - Alfred Huang

@fish_ball，看起来问题的措辞不太好，应该是“我有过类似的问题”，这不是一个新的问题，而是一个有效的答案。 - Matt Clark

Answer 3

我找到了另外一个解决方案。

首先，您需要创建一个函数。

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

}   

当你在输入框中单击时，调用此函数。

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

这对我有效。

- marcos.efrem

Answer 4

对于在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>

- Abhi

Answer 5

我在我的$(window).resize(..)中有自定义代码，我想要保留它，并且我希望将此解决方法限制为仅受影响的特定用例（仅限Android移动设备，文本输入或文本区域焦点），因此我想出了这个：

function isAndroidTextInputFocus() {
    var userAgent = navigator.userAgent.toLowerCase();
    var isAndroid = userAgent.indexOf("android") != -1;

    var result = (isAndroid && 
             ($("input[type=text]").is(":focus") || $("textarea").is(":focus"))     
           );

    return result;
}

然后我像这样调整了我的 $(window).resize(..)：

$(window).resize(function(e) {
    if (!isAndroidTextInputFocus()) {       
        // ... Proceed with my custom Window Resize logic
    }
}); 

- gene b.

Answer 6

需要 jQuery

我自己也遇到了这个问题，最终采用了这个解决方案。希望对其他人有所帮助。在我的情况下，调整大小导致搜索栏失去焦点。

// Makes it so that click events are fired on a mobile device.
$('#searchbar').each(function(){
    this.onclick = function() {}
});

// Runs an interval 10 times with a 50ms delay. Forces focus.
$("#searchbar").click(function() {
    var i = 0;
    var interval = window.setInterval(function(){
        if(i > 10) {
            clearInterval(interval);
        }
        $("#searchbar").focus();
        i++;
    }, 50);
});

- Rick South