HTML5 autofocus prevention from displaying a soft keyboard on small (mobile) screens

Question

Using the HTML5 Auto Focus attribute can be a really useful thing for web pages. However, use - for example, Firefox (37.0.1) on Android devices causes the soft keyboard to appear when the page loads.

<input type="text" name="q" autofocus>

The soft keyboard takes up a lot of space, so I would like to prevent it from opening. At the same time, autofocus is a very useful feature needed for regular screens / devices.

I tried to remove the “autofocus” attribute based on the width of the screen through jQuery when the page loads, however it is too late. At the moment, the browser, apparently, has already accepted the attribute and shows a soft keyboard:

$(function(){
    if (window.innerWidth < 600)
        $('*[autofocus]').removeAttr('autofocus');
});

Any suggestions?

Answer 1

, , . autofocus

<input type="text" name="q">

JS

function setFocus() {
    if (window.innerWidth > 600)
        $("input[name=q]").focus();
}
$(document).ready(function() {
    setFocus();
});