Disable backspace returning to previous page in readonly textbox mvc4 razor

Question

I have a datepicker field set to read only. I don't want the user to enter dates, but instead only select them from the calendar. This works fine. However, the moment I hit backspace in this readonly field, it redirects to the previous page. I would like to stop this functionality.

I have already included a "clear" button on the calendar for clearing purposes. However, when I still select all (the date) in this readonly field and try to clear (viz backspace) it does the above. Any assistance would be appreicated!!

Answer 1

The following appears to work in my tests, and you'll only prevent backspace from going back in the browser when in the actual input this way, instead of breaking the shortcut globally for the whole page.

$('input[readonly]').on('keydown', function (e) {
    if (e.which === 8) {
        e.preventDefault();
    }
});