iphone keyboard not hiding when tapping the screen

Question

I have an input field with number type

In normal browsers, I\'m typing some numbers and I\'m

Answer 1

Well... You can give me that reward cause I just solved this problem using a very SIMPLE solution.

Step 1 : Check if the input is currently in focus. I'll explain later why we need to add a delay on changing the value of inputFocused variable.

var inputFocused = false;
$('input').focus(function(){
        setTimeout(function(){
            inputFocused = true;
        },100);
    });

Step 2: Add an event listener if the screen or $(window) is tapped or clicked. If the window was tapped or clicked, check if the input is currently in focus. If true you must focus the window $(window).focus(), after focusing the window, the blur() function will now work! so you can now unfocus the input element then the keyboard will now hide automatically, then set the inputFocused variable to false again.

$(window).click(function(){
    if(inputFocused == true){
        $(window).focus();
        var input = $('input');
        input.blur();
        inputFocused = false;
    }
});`

SetTimeout explanation: The $(window).click() event will trigger if the user tap or click anywhere on the screen (e.g. Button click, Input click, tap or click screen, etc). If you tap the input, at the same time setting the inputFocused to true, the $(window).click() event triggers then check if inputFocused is true then will run the code which hides the virtual keyboard. So it means that whenever you focus an input field the keyboard will hide and that'll be a problem.

That's why we're adding a delay so that the code inside if(inputFocused == true) will not run while we're focusing the input field and it will only run if the input field is currently on focus.

TRIED AND TESTED!