Android-html-вход теряет фокус при открытии программной клавиатуры (ASP.net)

Я написал форму входа в веб-страницу в ASP.net.

Используя Nexus 4, Android 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);
});

Ответ 1

Я обнаружил, что это не связано с ASP.net или ViewState.

Когда появится клавиатура Android, окно браузера изменено - запуск события изменения размера.

У меня было что-то похожее на следующее:

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

Это переместило навигацию в DOM. Я предполагаю, что это перерисовывает DOM и поэтому вызывает что-либо в DOM, чтобы терять фокус. Я остановил это от изменения размера - это происходит только при загрузке начальной страницы.

Ответ 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
    }
});

Ответ 3

Я нашел другое решение

Сначала вам нужно создать функцию

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

}

и когда вы нажимаете на вход, вы вызываете функцию

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

Это работает для меня

Ответ 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);
});

Ответ 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>