Eingabefeld ausgeblendet, wenn der soft-Tastatur erscheint in phonegap
Erstellen einer mobilen Applikation mit Phonegap 3.6.3 für Android und iOS. Das problem ist nur für Android, wie iOS wirkt, wie ich es haben möchte.
Wenn ich auf ein input-text-Feld oder eine textarea, eine virtuelle Tastatur angezeigt. Es umfasst diese Elemente manchmal.
Den Seiten platziert sind innerhalb von iScroll, rechts am unteren Rand, und ein absoluter platziert div, so kann ich nicht scrollen, um entweder von diesen, sobald der Bildschirm erscheint. Ich vermute, ich habe zu ändern, die webview kleiner zu sein, wenn Sie die Tastatur hoch kommt. Jedoch nach dem Versuch, viele Dinge, es funktioniert nicht.
config.xml
<preference name="permissions" value="none" />
<preference name="phonegap-version" value="3.5.0" />
<preference name="orientation" value="default" />
<preference name="target-device" value="universal" />
<preference name="fullscreen" value="false" />
<preference name="webviewbounce" value="true" />
<preference name="prerendered-icon" value="false" />
<preference name="stay-in-webview" value="false" />
<preference name="ios-statusbarstyle" value="black-opaque" />
<preference name="detect-data-types" value="true" />
<preference name="exit-on-suspend" value="false" />
<preference name="show-splash-screen-spinner" value="false" />
<preference name="auto-hide-splash-screen" value="false" />
<preference name="disable-cursor" value="false" />
<preference name="android-minSdkVersion" value="13" />
<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />
<preference name="android-installLocation" value="auto" />
<preference name="SplashScreen" value="splash" />
(habe versucht viele verschiedene Werte für die android-windowSoftInputMode, wie pro Beispiel unten)
<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize|adjustPan" />
Kopf der web-Seite
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
(ja, ich habe versucht, viele andere Dinge auch)
alles, was Sie als relevant empfinden, lassen Sie es mich bitte wissen. Leider bin ich nicht die Freiheit, zu teilen, zu viel von dem code, sondern aus meinem Verständnis ist alles, was wir brauchen, zu kümmern.
Dank,
<style> <item name="android:windowTranslucentStatus">true</item> </style>
in Ihre Seite einInformationsquelleAutor Harry V | 2015-02-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
Entfernen Sie diese Zeile aus config.xml
Und ändern Sie die Zeile im Kopf der web-Seite'
Ich denke es muss etwas anders sein, weil der iscroll. Die Unterseite der iscroll ist immer noch am unteren Rand des Bildschirms, so kann ich nicht ganz nach unten scrollen
danke für Eure Hilfe, ich habe gemerkt, dass, wenn ich Schreibe, es tut anpassen der webview auf das konzentrieren, wo ich tippe zumindest - nicht ideal, aber immer noch effektiver, besser, als komplett ausgeblendet!
Ich bin nur froh, dass ich helfen konnte. Ja, irgendwie scrollt die Seite weiter runter (auch wenn es keine Raum gibt), um Platz zu machen für die Tastatur statt ihn abdecken der input-Felder.
InformationsquelleAutor Mujeeb
Ich hatte auch das gleiche problem - das zugrunde liegende problem, es scheint ist Sie nicht Bearbeiten können, werden dem androidManifest-Datei mit cordova zu Bauen. Alles, was Sie tun können, ist, Bearbeiten Sie die
config.xml
Datei, die wirklich können Sie nur ändern, eine eingeschränkte Teilmenge von Einstellungen. Was ich möchte ist, um in der Lage sein zu ändern diewindowSoftInputMode
.Habe ich eine Lösung für mein problem. das war die Tastatur, die über Felder am unteren Rand des Bildschirms, die ich denke, ist das gleiche problem. Ich habe verwendet die cordova 2.9.0 und cordova 3.6.0
Lösung 1: die Lösung, Die ich fand, war um diese Einstellung zu ändern in
config.xml
Diese nicht mit, die Einstellung auf "false" statt "true" - die Seite scrollt bis zu offenbaren das Feld, das Sie Bearbeiten, wenn die Tastatur geöffnet wird. (um genauer zu sein, ich glaube, die
viewport
änderungen, anstatt nach oben scrollen. Hoffe, Sie sind direkt auf den viewport Teil)Lösung 2: Versuchen, entfernen oder ersetzen Sie diese Zeile aus config.xml
als
statt. Dies funktioniert bei mir jetzt.
Lösung 3: Versuchen, dieser Stil hinzufügen, um Ihre Seite
EDIT:
Wenn Ihr mit
jQuery
können Sie versuchen, dass.Oh.ok. Versuchen Sie, überschreiben Sie die Eingabefelder durch hinzufügen
input[type="text"] { -webkit-user-select: text; }
zu Ihrer css-Datei die aktiv ist, für mobile/tablet-Geräte.Bitte siehe das edit
eigentlich setzen, dass syle tag macht es bewegen sich jetzt :s aber es ist fest in der selben webview. gehen, um es manuell hinzufügen und entfernen, je nachdem, ob die textarea ist im Fokus oder nicht
NÖ, nicht sicher, dass tag machte es nur einmal Arbeit - vielleicht war es nur ein zufälliger Fehler, der ging einfach Weg magisch an (ich denke, dass meine app tut das, weil so viel Los) versucht haben, Anregungen zu Bearbeiten, sorry, immer noch keine Würfel. die css-Methode ist nicht die beste, wie im wirklich mit einem plugin, das geht über die textarea - namens tinymce
InformationsquelleAutor rajmathan
Meine Lösung war, mit Ionische keyboard plugin - und Umsetzung dieses Kodex:
HTML:
CSS:
Javascript:
wenn keyborad ist offen
wenn die Tastatur geschlossen ist
Bieten eine bessere user experience, fügen Sie diesen code für alle Eingänge
<ion-content scroll="true"
...Wo würden Sie-Ionen-content scroll= true? @Azmeer
Hinzufügen von Ereignis-Listenern auf alle Elemente und timeouts scheint ein wenig ineffizient. Es ist möglich, erreichen einen ähnlichen Effekt mit nur zwei Veranstaltungen, die von dem plugin finden Sie unter Antwort.
InformationsquelleAutor Yonatan Alexis Quintero Rodrig
Habe ich die effizienteste Lösung zum Blättern in Eingabe automatisch und machen es sichtbar.
Zuerst müssen Sie den Tastatur-plugin(cordova plugin add com.ionisch ist.Tastatur) wie bereits von @Fedir. Dann auf Ihrem event-handler 'keyboardshow' - Ereignis den folgenden code hinzu:
P. S: Dies ist nur unterstützt Android (Chrome) und Safari. 😀
InformationsquelleAutor Biswas Khayargoli
Nur eine Lösung, die gearbeitet für meine full-screen-app hinzufügen, um die Cordova-Anwendung ionic-plugin-Tastatur plugin
JS-code :
Nach, dass Sie könnte passen Sie die Ansicht mit CSS.
ref.: https://stackoverflow.com/a/25823491/634275
Normalerweise werden Sie nicht brauchen, CSS, nur die plugins und JS-code.
InformationsquelleAutor Fedir RYKHTIK
Meine App nutzt die Android-Vollbild /immersive-Modus. Ich habe es gelöst durch Umschalten der Modi, sobald die Tastatur erscheint/verschwindet.
Habe ich installiert die cordova-plugin-fullscreen und ionic-plugin-Tastatur-plugins Hinzugefügt und dieser code:
InformationsquelleAutor Stéphane
Ich bin mit dem Ionische Keyboard Plugin - zu erkennen, wenn die Tastatur geöffnet ist, und fügen Sie die erforderlichen Polsterung entsprechend im Körper:
Wenn die Ereignisse ausgelöst, passen Sie die
padding-bottom
auf den Körper entsprechend der Höhe der Tastatur.Dann, um zu erkennen, ob das ausgewählte element sichtbar ist, müssen Sie die Mathematik zu tun, und Blättern Sie in den Behälter, wenn nötig. Der Letzte code, den ich verwende, ist folgende:
Den code nutzt Framework7 und seine Dom7-library, die ist sehr ähnlich zu jQuery. Es wird davon ausgegangen das scrollbare element ist
.page-content
, aber Sie können es anpassen entsprechend.Lassen Sie die
android-windowSoftInputMode
Voreinstellung auf Ihren Standardwert.InformationsquelleAutor Andrea Lazzarotto
Fügen Sie einfach folgende Zeile config.xml Datei, das ist es..
InformationsquelleAutor Nimesh khatri