Capturing native button clicks in Android phone in javascript

Question

Is there a way by which we can capture the click of HOME and BACK button in the html file in android application using phonegap/jqtouch/javascript?

I have an application for Android using phonegap. I want to capture the click of native HOME and BACK button of the Android phone in the html page to exit / go back gracefully.

Answer 1

You can catch the BACK button event in PhoneGap, however not the HOME button (this is a bad Android practice as there is a clear user expectation regardless of the app you're using about what the HOME key does: sends you back to your home screen! You don't want to override this functionality).

I will direct you to pieces of code in PhoneGap (LATEST source! pull from github for latest version of the phonegap framework) for guidance.

First, there is a 'BrowserKey' java object bound to the 'BackButton' JavaScript global:

http://github.com/phonegap/phonegap-android/blob/master/framework/src/com/phonegap/DroidGap.java#L291

The definition of this class is here: http://github.com/phonegap/phonegap-android/blob/master/framework/src/com/phonegap/BrowserKey.java

First thing you need to do in your application (I suggest you run this during application initialization) is to let the native side of the framework know you are overriding BACK button functionality. You would do this in JavaScript with a simple call:

BackButton.override();

From there on out, you can attach an event handler to the document's 'backKeyDown' event to execute logic every time the BACK button is hit. Something like this should work:

document.addEventListener('backKeyDown', function(e) {
  alert('you hit the back key!');
}, false);

As an addendum, here is the JavaScript code that wraps the back button event dispatching: http://github.com/phonegap/phonegap-android/blob/master/framework/assets/js/keyevent.js

Basically, after calling BackButton.override(), the native side of the framework will call window.keyEvent.backTrigger() every time the BACK button is hit.

Answer 2

This code sample works for PhoneGap 0.9.5 and later (tested on 0.9.6) :

    document.addEventListener("menubutton", function () { 
        alert('Menu button');
    }, false);  

    document.addEventListener("searchbutton", function () { 
        alert('Search button');
    }, false);                      

    document.addEventListener("backbutton", function () { 
        alert('Back button');
    }, false);  

Home button can't be handled. That's reserved by the system.