CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobilecordova
ULLAS MOHAN.V
ULLAS MOHAN.V

Reputation: 1531

iPhone Header Position Changed when click in HTML5-input type number

I am working with jQuery Mobile and PhoneGap. Currently I am facing an issue that on the iPhone version. when I click in input type number, its header position changes.

NOTE: In my page when I focus the input type number the number pad will be opened.

enter image description here

----

Then when I touch outside of the textbox the Number pad will be closed and Header position automatically changed back

enter image description here

----

Here is my code 

$("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();
});

Upvotes: 1

Views: 1132

Answers (1)

Shafi PS
Shafi PS

Reputation: 371

Use this code. it's worked for me...

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

This bug also fixed:https://github.com/jquery/jquery-mobile/issues/5532

Upvotes: 1

Related Questions