I am currently working on a project that involves jQuery Mobile and PhoneGap. One issue I am encountering is when using the iPhone version, the header position changes when I click on an input type number.
NOTE: When I focus on the input type number in my page, the number pad opens up.
----
After touching outside of the textbox, the Number pad closes and the header position automatically returns to normal.
----
Below is the code snippet I am using:
$("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();
});