Question

I need to change the back button functionality of my phonegap project, which I’ve succeeded in doing without any problem. The only issue now, is that I need to further change the functionality based on if the user has a certain field selected.

Basically, if the user has clicked in a field with the id of “date-selector1”, I need to completely disable the back button.

I was attempting to use document.activeElement, but it only returns the type of the element (input in this case), but I still want the functionality to work when they are in a general input, but not when they are in an input of a specific id.

EDIT
I tried all of the suggestions below, and have ended up with the following code, but still no success.

function pluginDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false);
}

function onBackKeyDown() {
    var sElement = document.activeElement;
    var isBadElement = false;
    var eList = ['procedure-date', 'immunization-date', 'lab-test-done', 'condition-onset', 'condition-resolution', 'medication-start-date', 'medication-stop-date', 'reaction-date'];
   console.log("[[ACTIVE ELEMENT: --> " + document.activeElement + "]]");
   for (var i = 0;i < eList.length - 1;i++) {
        if (sElement == $(eList[i])[0]) {
            isBadElement = true;
        }
    }
    if (isBadElement) {
        console.log('Back button not allowed here');
    } else if ($.mobile.activePage.is('#main') || $.mobile.activePage.is('#family') || $.mobile.activePage.is('#login')) {
        navigator.app.exitApp();
    } else {
        navigator.app.backHistory();
    }
}

Answer 1

if you’re listening for the back button you can add this if statement:

if (document.activeElement == $("#date-selector1")[0]) { 
    /*disable button here, return false etc...*/ 
}

or even better (Thanks to Jonathan Sampson)

if (document.activeElement.id === "date-selector1") { 
    /*disable button here, return false etc...*/ 
}