Pole wejściowe ukryte, gdy pojawi się klawiatura programowa w phonegap

Question

Tworzenie aplikacji mobilnej za pomocą Phonegap 3.6.3 na Androida i iOS. Problem dotyczy tylko Androida, ponieważ iOS działa tak, jak chciałbym.

Po kliknięciu na pole tekstowe lub pole tekstowe pojawia się klawiatura ekranowa. Czasami obejmuje te elementy.

Strony są umieszczane wewnątrz iScroll, u dołu, i kolejny div umieszczony absolutnie, więc nie mogę przewinąć do żadnej z nich, gdy pojawi się ekran. Podejrzewam, że muszę zmienić widok, żeby był mniejszy, gdy pojawi się klawiatura. Jednak po wypróbowaniu wielu rzeczy to nie działa.

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" /> 

(próbowali różne wartości Android windowSoftInputMode, jak na przykład poniżej)

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize|adjustPan" /> 

głowicy strony

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> 

(tak, próbowałem także wielu innych rzeczy)

Cokolwiek innego możesz uznać za stosowne, proszę dać mi znać. Niestety, nie mam prawa udostępniać zbyt wiele kodu, ale z mojego zrozumienia to wszystko, o co musimy się martwić.

Dzięki,

Answer 1

usunąć tę linię od config.xml

<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" /> 

i zmienić linię w 'głowy' do strony internetowej

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 

Answer 2

ja też miałem ten sam problem - podstawowy problem wydaje się, że nie można edytować pliku AndroidManifest za pomocą Cordova Build. Wszystko, co możesz zrobić, to edytować plik config.xml, który naprawdę pozwala tylko na zmianę ograniczonego podzbioru ustawień. To, co chciałbym, to móc zmienić windowSoftInputMode.

Znalazłem rozwiązanie mojego problemu. która była klawiaturą pojawiającą się nad polami u dołu ekranu, co moim zdaniem jest tym samym problemem co ty. Użyłem Cordova 2.9.0 i 3.6.0 Cordova

Rozwiązanie 1: Rozwiązanie znalazłem zmienić to ustawienie w config.xml

<preference name="fullscreen" value="false" /> 

to robi z tego ustawienia jest ustawiona na "false" zamiast "prawda" - strona przewija się teraz, aby wyświetlić pole, które edytujesz po otwarciu klawiatury. (Aby być bardziej dokładne, uważam, że viewport zmiany zamiast przewijać w górę Mam nadzieję, że są w porządku ze strony rzutni.)

Rozwiązanie 2: Spróbuj usunąć lub zastąpić ten wiersz z config.xml

<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" /> 

jak

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize"/> 

zamiast. To działa teraz dla mnie.

Rozwiązanie 3: Spróbuj dodać ten styl do swojej strony

<style> <item name="android:windowTranslucentStatus">true</item></style> 

EDIT:

Jeśli urządzenie korzysta jQuery można spróbować.

$('input, textarea, button, a, select').off('touchstart mousedown').on('touchstart mousedown', function(e) { 
    e.stopPropagation(); 
}); 

Answer 3

Moje rozwiązanie używał Ionic keyboard plugin i wdrażania tego kodu:

HTML:

<div id="page" class="page-content"> 
    ...   
</div> 

CSS:

.page-content {  
height: 100%; 
overflow: auto;} 

Javascript:

• gdy keyborad jest otwarty

  window.addEventListener('native.keyboardshow', function (e) { 
      var deviceHeight = window.innerHeight; 
      var keyboardHeight = e.keyboardHeight; 
      var deviceHeightAdjusted = deviceHeight - keyboardHeight;//device height adjusted 
      deviceHeightAdjusted = deviceHeightAdjusted < 0 ? (deviceHeightAdjusted * -1) : deviceHeightAdjusted;//only positive number 
      document.getElementById('page').style.height = deviceHeightAdjusted + 'px';//set page height 
      document.getElementById('page').setAttribute('keyBoardHeight', keyboardHeight);//save keyboard height 
  }); 
  

• gdy klawiatura jest zamknięta

  window.addEventListener('native.keyboardhide', function (e) { 
      setTimeout(function() { 
       document.getElementById('page').style.height = 100 + '%';//device 100% height 
      }, 100); 
  

Aby zapewnić lepsze doświadczenie użytkownika, dodaj ten kod do wszystkich wejść

var inputs = document.querySelectorAll('input');//select all input 
var n = inputs.length; 
for (var i = 0; i < n; i++) { 
    var input = inputs[i]; 
    input.addEventListener('focus', function (e) {//add event focus 
     var inp = this; 
     //wait 0.6 seconds to scroll down to the input has focus 
     setTimeout(function() { 
      try { 
       //if the keyboard is open 
       if (cordova.plugins.Keyboard.isVisible) { 
        var padding = 15; 
        var targetPosition = parseInt($$(inp).offset().top + padding); 
        var keyboardHeight = parseInt(document.getElementById('page').getAttribute('keyBoardHeight'));//get keyboard height 

        //if the input is hidden by the keyboard,scroll to the input 
        if (targetPosition >= keyboardHeight) { 
         padding *=5; 
         document.getElementById('page').scrollTop = targetPosition - padding; 
        } 
       } 
      } catch (ex) { 
       alert(ex.message); 
      } 
     }, 600); 
    }, true); 

Answer 4

Tylko jedno rozwiązanie, które działało dla mojej aplikacji pełnoekranowej, to do dd stosowania Cordova ionic-plugin-keyboard wtyczki

cordova plugin add com.ionic.keyboard 

kod JS:

// This event fires when the keyboard will hide 
window.addEventListener('native.keyboardshow', keyboardShowHandler); 

function keyboardShowHandler(e){ 
    $("body").addClass("keyboardOn"); 
} 

// This event fires when the keyboard will show 
window.addEventListener('native.keyboardhide', keyboardHideHandler); 

function keyboardHideHandler(e){ 
    $("body").removeClass("keyboardOn"); 
} 

Po że można dostosować widok z CSS.

ref .: https://stackoverflow.com/a/25823491/634275

Answer 5

Esta funciona muy bien.

config.xml

nazwa wtyczki = "com.ionic-do-phonegap.keyboard" specyfikacji = "0.0.1" źródło = "PGB"

  window.addEventListener('native.hidekeyboard', keyboardHideHandler); 
 
      window.addEventListener('native.showkeyboard', keyboardShowHandler); 
 
      function keyboardHideHandler(e){ 
 
       alert('Goodnight, sweet prince'); 
 
      } 
 
      function keyboardShowHandler(e){ 
 
       alert('Keyboard height is: ' + e.keyboardHeight); 
 
      }

Answer 6

Mam najbardziej wydajne rozwiązanie, aby automatycznie przewinąć dane wejściowe i uczynić je widocznymi. Najpierw musisz dodać wtyczkę do klawiatury (cordova plugin add com.ionic.keyboard), jak wspomina @Fedir.Następnie na swojej obsługi zdarzeń zdarzenia „keyboardshow” dodaj następujący kod:

window.addEventListener('native.keyboardshow', function(e){ 
    setTimeout(function() { 
     document.activeElement.scrollIntoViewIfNeeded(); 
    }, 100); 
}); 

P.S: To jest obsługiwana tylko na Androida (chrom) i Safari. : D

Answer 7

Moja aplikacja wykorzystuje tryb pełnoekranowy/immersyjny Androida. Rozwiązałem go, przełączając tryby, gdy tylko klawiatura pojawi się/zniknie.

Mam zainstalowaną Cordova-plugin-fullscreen i jonowe-plugin-klawiaturowe wtyczek i dodało ten kod:

document.addEventListener('deviceready', 
    function(){ 
    // disable immersive mode on Android when keyboard is shown 
     try { 
     if (cordova.platformId == 'android') { 
     AndroidFullScreen.immersiveMode(false, false); 
     window.addEventListener('native.keyboardshow', function (e) { 
      AndroidFullScreen.showSystemUI(false, false); 

     }); 
     window.addEventListener('native.keyboardhide', function (e) { 
      AndroidFullScreen.immersiveMode(false, false); 
     }); 
     } 
    } catch (error) { 
     console.log('deviceready - ' + error); 
    } 
}, false); 

Answer 8

Używam Ionic Keyboard Plugin wykryć, gdy klawiatura jest otwarta i dodać niezbędne dopełnienie odpowiednio do korpus:

phonegap plugin add ionic-plugin-keyboard --save 

Gdy ogień zdarzenia, można dostosować padding-bottom na ciele, aby dopasować wysokość klawiatury.

Następnie, aby wykryć, czy widoczny element jest widoczny, musisz wykonać matematykę i przewinąć kontener, jeśli to konieczne. Ostateczny kod używam jest następujący:

cordova.plugins.Keyboard.disableScroll(true); 
$$(window).on('native.keyboardshow', function(e) { 
    $$('body').css('padding-bottom', e.keyboardHeight + 'px'); 

    var el = $$('input:focus, textarea:focus'); 
    var content = el.closest('.page-content'); 
    var offset = el.offset().top + content.scrollTop(); 
    /* 15 is an arbitrary value to add a bit of padding */ 
    var safeAreaHeight = el.outerHeight(true) + 15; 
    var maxPosition = content.height() - safeAreaHeight; 
    if (content.scrollTop() < (offset - maxPosition)) { 
      content.scrollTop(offset - maxPosition); 
    } 

}); 
$$(window).on('native.keyboardhide', function(e) { 
    $$('body').css('padding-bottom', 0); 
}); 

Kod wykorzystuje Framework7 i jego biblioteki Dom7 która jest bardzo podobna do jQuery. Zakłada on, że elementem przewijanym jest .page-content, ale można go odpowiednio dostosować.

Powinieneś pozostawić domyślną wartość ustawienia android-windowSoftInputMode.

Answer 9

Wystarczy dodać następujący wiersz do pliku config.xml, to jest to ..

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize"/>