I have a jqm/phonegap application which uses a fixed header and footer. When I focus a textbox the footer gets removed and the keyboard pops up.
Is it possible to stop the footer from getting removed on focus?
Edit: I've read that the screen width sets the hide or show the toolbar(for tablet support). Is it possible to always set the header and foother. No matter what screen size.
This is an example of a page I use(I use ajax paging):
<html>
<body>
<div data-role="page" id="myPage" data-theme="a">
<div data-role="header" data-tap-toggle="false" data-theme="a" data-position="fixed">
<h1 id="myHeader"></h1>
</div>
<div data-role="content">
<ul data-role="listview" id="lstvw_Items" data-filter-theme="a" data-filter="true"></ul>
</div>
<div data-role="footer" data-tap-toggle="false" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home"></a></li>
<li><a href="2.html" data-icon="grid"></a></li>
<li><a href="3.html" data-icon="info"></label></a></li>
<li><a href="4.html" data-icon="gear"><label></label></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
The listview get's filled with ajax and can be filtered with the data-filter. If I press the datafilter txtbox the footer gets removed and when I close the keyboard the footer is at the bottem of the page.(Outside the screen).
Also when there's a field in focus and a link is pressed the page flickers and when theres no focus it doesn't happen.
First I was using iSCroll to keep the fixed headers and footers but this was creating alot of other issues.(With keyboard input,performance,...)
Extra info:
I'm using
- jqm 1.3.1
- phonegap 2.9.0
- testing at the moment on android 2.3.x and higher
Edit: I have figured out why the focus is never lost when press enter. The application blocks the enter key behaviour to prevent form submitting. Like this:
document.onkeypress = stopRKey;
function stopRKey(evt){
var evt = (evt) ? evt: ((event) ? event: null);
var node = (evt.target) ? evt.target:((evt.srcElement) ? evt.srcElement:null);
if((evt.keyCode == 13) && (node.type=='text')){node.blur();return false;}
}
I'm now using node.blur(); in the if cause of this function. But this still causes flicker.
I upgraded to jqm 1.3.2 and modified the code for the hideduringfocus.
line 9905:
This seems to work pretty good on android and the bar has stopped flickering. If you know a better answer that doesn't require jquery modifications please post it!