Monday, 21 July 2014

Prevent the backspace key from going to the previous page in Ext JS application

If you have an app with just one view in ExtJS(Sencha), there is a possibility that the user will open the app in a browser that they have been using to cruise around the web and the user will likely use the backspace key in your app(say, inside a text box) then you should think about turning off the backspace == url -1 feature.

To disable 'Backspace' key use below JavaScript inside script tag of your html page:

document.onkeydown = KeyCheck;
function KeyCheck(e) {
if (!e) {
e = window.event;
}
var doPrevent = false;
if (e.keyCode === 8) {
var d = e.srcElement || e.target;
if ((d.tagName.toUpperCase() === 'INPUT' && (d.type.toUpperCase() === 'TEXT' || d.type.toUpperCase() === 'PASSWORD' || d.type.toUpperCase() === 'EMAIL' )) || d.tagName.toUpperCase() === 'TEXTAREA') {
doPrevent = d.readOnly || d.disabled;
} else {
doPrevent = true;
}
}
if (doPrevent) {
(e.preventDefault) ? e.preventDefault() : e.returnValue = false;
}
}

Above code works well for IE and Chrome.