PhoneGap + jQueryMobile : Le bouton retour d'Android ferme l'application dans une liste imbriquée

Question

Je suis en train de créer une application en utilisant PhoneGap et jQuery Mobile.

En utilisant jQuery Mobile, j'ai créé une liste imbriquée.

Après avoir cliqué dans la liste imbriquée, je veux revenir en arrière. Je m'attends à ce que le fait de cliquer sur le bouton "retour" de mon appareil Android ( Nokia N1 ) qu'il reculera d'un niveau.

Mais au lieu de cela, Android ferme l'application au lieu de remonter d'un niveau.

J'utilise PhoneGap 1.2.0, jQuery Mobile v1.0rc2, jQuery 1.6.4 et Android 2.3.3 (Gingerbread).

J'ai également effectué une mise à niveau vers jQuery Mobile 1.0, et il n'y a aucun changement.

Answer 1

Vous pouvez écouter les événements liés au bouton retour :

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown() {
    // Handle the back button
}

Et si la page actuelle est la page d'accueil ( $.mobile.activePage dans jQuery Mobile) sortir de l'application avec :

navigator.app.exitApp();

Answer 2

J'ai le même problème. J'ai trouvé comment gérer le bouton retour dans le code Java.

Cela permet de revenir en arrière, si possible, ou de quitter l'application.

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
  if (keyCode == KeyEvent.KEYCODE_BACK) {
    if(appView.canGoBack()){
       appView.goBack();
        return true;
    }
  }
  return super.onKeyDown(keyCode, event);
}

Il est également possible de le faire du côté du JavaScript :

document.addEventListener("backbutton", function() {
    //Logic//
}, false);

Answer 3

Essayez aussi :

function onBackKeyDown(e) {
    e.preventDefault();

    if ($.mobile.activePage.attr('id') == 'main') {
         <!-- navigator.app.exitApp(); -->
         device.exitApp();
    }
    else {
         history.back(1);
    } 
}

Answer 4

Pour ceux qui sont venus ici parce que l'application se ferme après avoir été dans un champ de texte ciblé et avoir appuyé sur le bouton retour :

Dans Android 4.0.3 (ICS), il n'est pas nécessaire de remplacer le bouton retour par l'API PhoneGap pour empêcher la fermeture/le plantage de l'application après avoir mis au point un champ de texte et avoir appuyé sur le bouton retour. Normalement, cela ferme l'application, parce que WebKit crée une mise en évidence par tapotement avec un contour supplémentaire qui ne peut pas être modifié avec CSS.

Lorsque vous mettez au point l'entrée, le clavier logiciel s'affiche. Lorsque vous appuyez pour la première fois sur la touche retour, le clavier virtuel disparaît. Lorsque vous cliquez à nouveau pour revenir en arrière dans l'historique de navigation, l'application se ferme au lieu de sauter à la page visitée auparavant. Cela est dû au fait que la mise en évidence sort de la structure de navigation. Il semble qu'il ne soit pas dans le DOM. Je ne comprends pas vraiment ce comportement. Voici la solution :

Il suffit d'ajouter

input {
-webkit-user-modify: read-write-plaintext-only
}

Cela interrompt le tap-highlight effectué par webkit et vous restez dans l'application et pouvez revenir en arrière dans l'historique avec votre backButton (qui n'a pas été remplacé).

Answer 5

Je suis venu ici à cause du problème du bouton retour dans un champ de texte ( input o textarea ) dans une application Cordova/PhoneGap qui ne déclenche pas le comportement normal (dans mon cas, il ne déclenche pas mon gestionnaire JavaScript).

Malheureusement, la solution ci-dessus utilisant CSS ne fonctionne pas sur Android 2.3.

Et la solution choisie, qui remplace l'événement en Java, n'est pas suffisante pour moi car j'ai besoin de déclencher un handler JavaScript, et non de revenir en arrière dans la webview. De plus, cette solution réimplémente le comportement par défaut de Cordova, ce qui n'est pas une bonne pratique, car elle perd d'autres fonctionnalités intégrées.

Ce que j'ai fait (et cela a fonctionné), c'est remplacer l'événement KeyUp, comme ci-dessus, mais au lieu de le réimplémenter, j'ai simplement appelé le gestionnaire de l'appVIew (qui est l'implémentation de Cordova).

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    return appView.onKeyUp(keyCode, event);
}