Question

I’m using the below JavaScript function to prevent backspace from going back.

function preventBackspace(e) {
    var evt = e || window.event;
    if (evt) {
        var keyCode = evt.charCode || evt.keyCode;
        if (keyCode === 8) {
            if (evt.preventDefault) {
                evt.preventDefault();
            } else {
                evt.returnValue = false;
            }
        }
    }
}

I have added onkeydown="preventBackspace();" to all the text boxes.

I have two radio buttons and two textboxes which when checked make the other textbox readonly. When hitting the backspace key it is not going to back page, but I am not able to delete from the editable text box. Please suggest. Thanks!

Answer 1

When the user is currently focused on a textbox, the backspace key does not cause the browser to go back. The backspace in a textbox is used to delete a character – and since you’ve added preventDefault(), you’re stopping that behavior from happening.

If your goal is to prevent the user from accidentally leaving the form before they are finished, you can use window.onbeforeunload to display a warning message that allows the user to cancel navigation:

window.onbeforeunload = function() {
    return "Are you sure you want to leave this page?  Your current entries" +
        " will be lost.";
};