防止HTML5自动对焦在较小(移动)屏幕上显示软键盘

Question

使用HTML5属性"autofocus"对于网页来说非常有用.但是,在Android设备上使用 - 例如 - Firefox(37.0.1)会导致在页面加载时显示软键盘.

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

软键盘占用了大量空间,因此我想阻止它打开.同时,自动对焦是我们普通屏幕/设备所需的非常有用的功能.

我尝试在页面加载时通过jQuery删除基于屏幕宽度的"自动对焦"属性,但是,为时已晚.此时,浏览器显然已经接受了该属性并显示了软键盘:

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

有什么建议？

Answer 1

试试这个，它可以在桌面上运行，我还没有在移动设备上测试过。删除属性autofocus

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

和JS

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