how do I disable the phone's back button in Android using Jquerymobile, PhoneGap

Question

Could someone please tell me how to disable Android's back button (That is the back-button found on all Android phones).

I am using Jquery mobile with PhoneGap. I find this online in the Cordova documentation, but this does not work for me. Back button event is not even registering.

function onLoad() {
    console.log("**** INSIDE ONLOAD FUNCTION *****");
    document.addEventListener("backbutton", onBackKeyDown, false);   
}

// Handle the back button
function onBackKeyDown() {

    // Pressing the back button does not print this message.
    console.log("**************** INSIDE BACK BUTTON *************");
}

Users expect to be able to use the BACK button to navigate their app, or possibly leave the app. If you wish to *do* something *positive* with the BACK button, that is fine. For example, you might use it to navigate within your own app, until the user gets to the beginning, at which point you allow normal BACK button behavior to happen. Otherwise, please leave the BACK button alone. — CommonsWare, Sep 23 '12 at 23:48
@Ouadie answer is correct. The problem with your code is you did not wait for the "deviceready" event before registering your back key event listener. — Simon MacDonald, Sep 24 '12 at 13:34

Ouadie · Answer 1 · 2016-07-20T11:08:19.100

13

I used backKeyDown and it works for me :

function onDeviceReady() {
        document.addEventListener("backbutton", backKeyDown, true);
        console.log("PhoneGap is ready");
    }

    function backKeyDown(d) {
        navigator.app.exitApp(); // To exit the app!
        e.preventDefault(); // to disable the back
    }

make sure that PhoneGap is ready!

Update: You can leave the handler empty to disable it

edited Jul 20 '16 at 11:08

answered Sep 24 '12 at 02:25

Ouadie

13,005
4
52
62

If this answer solved your problem, please mark it as answer for both Ouadie's pleasure and people who have a similar question that end up here. – Ouadie Sep 24 '12 at 13:43
onDeviceReady function is not being executed for me. I have tried using this before. I am doing exactly what is in the documentation and what you have stated above. My app works fine, except for the back button. Would you have any suggestions why onDeviceReady is not being called ? Thanks Thank you – user1478810 Oct 01 '12 at 01:00
still searching for a solution ? – Ouadie Nov 27 '12 at 11:29
And just to confirm, do you need to add an event listener for the back button on each page where you need to override the back button, is that correct? – Ciaran Gallagher Mar 31 '13 at 23:48
Yes! you can add it to a common js file. – Ouadie Mar 31 '13 at 23:54
1

@Jason, yes it does, just add an empty event handler – Omar Meky Apr 25 '14 at 12:23
Work very well for me! Thanks! – Steinfeld Apr 26 '14 at 18:58
1

If you want to disable the phone's back button use "e.preventDefault()" – Narsingh Tomar Jul 20 '16 at 05:11

score 0 · Answer 2 · answered Jul 20 '16 at 05:08

sometimes you can get blocking Back button, sometimes not.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    document.addEventListener("backbutton", function (e) {
        e.preventDefault();
    }, false );
}

how do I disable the phone's back button in Android using Jquerymobile, PhoneGap

2 Answers2

Linked