I have a small task viewer with a panel where you can create a task, anyway, the problem I am facing is that when you are on a mobile device and scroll the panel, it returns to the top, so you need to again scroll through the page to click on the required input, when you finish filling (or not) the input and try to press the "Back" button to cancel the keyboard, it will return to the top of the page again.
I tried using .focus , but it ignores it.
Why is this happening? How can i fix this? Any help is truly appreciated.
Click the plus button to open the panel.
PS: I cleared the code to focus on the problem
My code is:
#header { background-color: #72a9dc; text-shadow: 0 0 3px #000; color: white; } .code { background-color: #b4d0ec; text-shadow: 0 0 1px #fff; border-radius: 3px; width: 30px; text-align: center; float: left; } .label { margin-left: 10px; text-align: center; float: left; } .date { float: right; border-radius: 3px; border: 1px solid #000; width: 100px; height: 20px; text-align: center; text-shadow: 0 0 0 #fff; color: black; } .detail { font-size: 20px; color: #72a9dc; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> </head> <body> <div id="header" data-role="header" style="overflow:hidden;" data-position="fixed" data-tap-toggle="false"> <h1>Title</h1> <a onclick="onTop();" data-icon="search" data-iconpos="notext">Search</a> <a onclick="newTask();" id="newTask" href="#add-form" data-icon="plus" data-iconpos="notext">Add</a> </div> <div role="main" class="ui-content jqm-content jqm-fullwidth"> <form class="ui-filterable" id="search"> <input id="rich-autocomplete-input" data-type="search" placeholder="Search. . ."> </form> <ul id="list" data-role="listview" data-filter="true" data-inset="true" data-input="#rich-autocomplete-input"> </ul> </div> <div data-role="panel" data-position="right" data-display="reveal" data-theme="a" id="add-form"> <form class="userform"> <h2 id="myTitle"></h2> <label>Code:</label> <input type="number" id="code" min="1" value="" data-clear-btn="false" data-mini="true"> <label>Label:</label> <input type="text" id="label" maxlength="20" value="" data-clear-btn="true" autocomplete="off" data-mini="true"> <label>Date:</label> <input type="date" id="date" value="" data-clear-btn="true" data-mini="true"> <label>Code:</label> <input type="number" id="code" min="1" value="" data-clear-btn="false" data-mini="true"> <label>Label:</label> <input type="text" id="label" maxlength="20" value="" data-clear-btn="true" autocomplete="off" data-mini="true"> <label>Date:</label> <input type="date" id="date" value="" data-clear-btn="true" data-mini="true"> <label>Code:</label> <input type="number" id="code" min="1" value="" data-clear-btn="false" data-mini="true"> <label>Label:</label> <input type="text" id="label" maxlength="20" value="" data-clear-btn="true" autocomplete="off" data-mini="true"> <label>Date:</label> <input type="date" id="date" value="" data-clear-btn="true" data-mini="true"> <label>Code:</label> <input type="number" id="code" min="1" value="" data-clear-btn="false" data-mini="true"> <label>Label:</label> <input type="text" id="label" maxlength="20" value="" data-clear-btn="true" autocomplete="off" data-mini="true"> <label>Date:</label> <input type="date" id="date" value="" data-clear-btn="true" data-mini="true"> <label>Code:</label> <input type="number" id="code" min="1" value="" data-clear-btn="false" data-mini="true"> <label>Label:</label> <input type="text" id="label" maxlength="20" value="" data-clear-btn="true" autocomplete="off" data-mini="true"> <label>Date:</label> <input type="date" id="date" value="" data-clear-btn="true" data-mini="true"> <div class="ui-grid-a"> <div class="ui-block-a"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">Cancel</a> </div> <div class="ui-block-b"><a href="#" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-mini" onclick="addTask();">Save</a> </div> </div> </form> </div> </body> </html>
source share