Warum scrollt mein Panel auf Mobilgeräten? jQueryMobile

Ich habe eine kleine Task-Viewer mit einem Panel, wo Sie eine Aufgabe erstellen können, das Problem, das ich habe ist, dass wenn Sie auf einem mobilen Gerät sind und Sie scrollen Sie das Panel zurück oben, also müssen Sie erneut nach unten scrollen, um auf die gewünschte Eingabe klicken zu können, wenn Sie die Eingabe beendet haben (oder nicht) und versuchen, auf die Zurück-Schaltfläche zu klicken, um die Tastatur wieder zu entfernen .Warum scrollt mein Panel auf Mobilgeräten? jQueryMobile

Ich habe versucht, .focus zu verwenden, aber es ignoriert es.

Warum passiert es? Wie kann ich es reparieren? Jede Hilfe wird herzlich geschätzt.

Klicken Sie auf die Plus-Schaltfläche zum Öffnen der Platte

PS: ich den Code auf die Frage konzentrieren aufgeklärt

Mein 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>

Quelle

2015-10-15 Kyle

Anstatt href="#" zu verwenden, was dazu führen kann, dass die Seite tatsächlich an die Spitze geht, weil # ein gültiger Link ist, können (und sollten) Sie href="javascript:void(null);" verwenden, was nur eine leere JavaScript-Funktion ist, die dafür sorgt, dass Ihre Schaltfläche nichts anderes tut als was es tun sollte.

Hoffe, dass hilft.

Quelle

2015-10-30 12:12:52

Danke für die Antwort, ich werde es versuchen, dann werde ich zurückkehren :) +1 – Kyle

Kein Problem, hat es funktioniert? –

Oh verdammt, ja es hat funktioniert, ich habe vergessen, es zu markieren, es tut mir leid, danke für die Erinnerung an mich. Ich habe es mit einer anderen Methode behoben, aber deine Antwort hat auch funktioniert – Kyle

Warum scrollt mein Panel auf Mobilgeräten? jQueryMobile

Antwort

Verwandte Themen