Android的 - HTML输入丢失软键盘打开时对焦（ASP.net）(Android - ht

我已经写在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什么可以失去焦点。 我停止了这种情况的发生上调整大小 - 使它只在初始页面加载发生吧。

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

Answer 3:

我已经找到其他的解决办法

首先，你必须创建一个函数

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

}   

当你在输入点击调用该函数

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

这对我的作品

Answer 4:

需要的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);
});

Answer 5:

对于那些谁在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>

Answer 6:

我有自定义代码在我的$(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;
}

然后我调整我的$（窗口）.resize（..）是这样的：

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

文章来源: Android - html input loses focus when soft keyboard opens (ASP.net)