Android - html input loses focus when soft keyboard opens (ASP.net)

Question

I\'ve written a web-page login form in ASP.net.

Using a Nexus 4, stock Android 4.2.1, native Chrome browser - when I click on the fields,

Answer 1

Requires jQuery

I've been having this problem myself, and ended up using this solution. It might be useful to someone else. In my case, the resizing made it so that the searchbar lost focus.

// 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 2

I have find other solution

First you have to create a function

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

}   

and when you click in an input you call the function

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

This works for me

Answer 3

I had custom code in my $(window).resize(..) that I wanted to keep, and I wanted to restrict this workaround to only the specific use case being impacted (Android mobile only, Text Input or TextArea focus), so I came up with this:

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

and then I tweaked my $(window).resize(..) like this:

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

Answer 4

I had a similar problem, my approach to prevent resize to execute if input is in focus solved the problem:

$(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 5

I discovered this is nothing to do with ASP.net or ViewState.

When the Android keyboard appears, the browser window is resized - triggering the resize event.

I was running something similar to the following:

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

This moved the navigation in the DOM. I guess this redraws the DOM and so causes anything in the DOM to lose focus. I stopped this from happening on resize - making it only happen on initial page load instead.

Answer 6

For those who face this issue in WordPress, insert the following code into the header.

<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>