jquery - 单击 HTML5 输入类型编号时 iPhone 标题位置已更改

Question

我正在使用 jQuery Mobile 和 PhoneGap。目前我在 iPhone 版本上遇到了一个问题。当我单击输入类型编号时，其标题位置会发生变化。

注意：在我的页面中，当我关注输入类型数字时，将打开数字键盘。

----

然后，当我触摸文本框外部时，数字键盘将被关闭，并且标题位置会自动变回

----

这是我的代码

$("input,select").live("blur",function() {
  setTimeout(function(){
    $("[data-role=header]").css("position","fixed");
  },800);
  $("[data-role=footer]").show();
});
$("input,select").live("focus",function() {
  $("[data-role=header]").css("position","absolute");
  $("[data-role=footer]").hide();
});

Answer 1

使用此代码。它对我有用...

// Workaround for buggy header/footer fixed position when virtual keyboard is on/off
$('input, textarea')
.on('focus', function (e) {
    $('header, footer').css('position', 'absolute');
})
.on('blur', function (e) {
    $('header, footer').css('position', 'fixed');
    //force page redraw to fix incorrectly positioned fixed elements
    setTimeout( function() {
        window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() );
    }, 20 );
});

此错误也已修复：https ://github.com/jquery/jquery-mobile/issues/5532