Disable Android back button in Ionic framework

[Peter Perecz]

Hi Team,

I am using an Ionic framework and in some pages I want to disable Android hard back button. I have studied and tried many versions from many forums but could not get it working.

My goal is to tilt Android hardware back button on certain pages.

Could you please help me out here?

Thanks,
Peter

[Serhii Kulibaba]

Hello Peter,

Please use JS below to disable Android back button:

predocument.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false );/pre

[taucher]

Hello Peter,

Did you make it work? (To disable Android hardware back button)

I am also trying but couldn't achieve.

Thanks,

[taucher]

Hello Sergiy,

Your answer is not working on Ionic Project. Did you test it?

Thanks,

[Serhii Kulibaba]

Hello,

Where did you add that code? Please add it to the init function of the index page

[taucher]

Hello Sergiy,

Did you test it?

This is not working:

1) Create a blank new Ionic project.

2) Add
predocument.addEventListener("deviceready", onDeviceReady, false);

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

in "index" page.

3) Build and test on device.

But the code below works :
pre
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton",CallbackFunction, false);
}

function CallbackFunction() {
alert("Back Button Clicked");
}

/pre

Thanks,

[Serhii Kulibaba]

Thank you for update! Glad it works now! Please use worked code further.

[Ricardo Amaral]

TIP: You can only test all samples with the APK APP installed on your phone. The Tester app doesn't work in this case.

Samples above "run" but none of them prevented the back action in my tests.

I found the following sample that worked fine for me.

It will block back button on all pages
pre

var $ionicPlatform = Apperyio.get("$ionicPlatform");

$ionicPlatform.registerBackButtonAction(function(event) {

Code: Select all

alert("Back Button was pushed"); // alert message just to test it 

}, 100);

/pre

Also, the following version prompt an exit question in a specific page. I implemented this to prevent users to go back to Login logon page:

pre

var $ionicPlatform = Apperyio.get("$ionicPlatform");
var $ionicPopup = Apperyio.get("$ionicPopup");

$ionicPlatform.registerBackButtonAction(function(event) {
if ($scope.header.title == "Main Page") { // In this condition user is prompted to exit app
$ionicPopup.confirm({
title: 'System warning',
template: 'are you sure you want to exit?'
}).then(function(res) {
if (res) {
ionic.Platform.exitApp();
}
});
} else {
history.back(); //this will force to continue to previous page
}
}, 100);

/pre

Reference: http://www.gajotres.net/ionic-framewo...

More here: http://ionicframework.com/docs/api/se...

No further assistance is required for me.

[taucher]

Hello Ricardo,

Thank you so much for the solution!

As you mentioned, adding event listener does not prevent back button action.

But with $ionicPlatform, it is well done!

Regards,