Menu
I've got a little task viewer with a panel where you can create a task, anyway, the problem I'm having is that when you're on a mobile device and you scroll down the panel, it gets back to the top, so you need to scroll down again to be able to click on the input you want, when you finish filling out(or not) the input and try clicking on the back button to dismiss the keyboard it goes back to the top again.
I tried to use .focus but it ignores it.
Why is it happening? How can I fix it? Any help is sincerely appreciated.
Click on the plus button to open the panel
P.S.: I cleared up the code to focus on the issue
My Code:
#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>
748
Instead of using href="#" which can cause the page to actually go to the top because the # is a valid link, you can (and should) use href="javascript:void(null);" which is just an empty javascript function that will make sure your button will do nothing else than what it should do.
Hope that helps.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
