SmartGWT 3.0 LGPL 2012-11-02
IE 9
If a "non-text" form item is focused when you click backspace IE triggers history->back. In many cases that's really undesirable. Customers forced us to write a JavaScript key-down handler that effectively circumvents this (code at the bottom). That script is directly integrated into the GWT host page.
The side-effects in our SmartGWT code are quite severe, though:
Question: is the script itself faulty e.g. eating events where it shouldn't (we don't think so)? Or is it "wrong" in the first place to combine key-down handlers outside SmartGWT with the ones inside? Is there an easier way to suppress backspace key events outside non-text items?
The code:
[html]/*
* The backspace key is often mapped in browsers as to execute history.back. The user is taken
* back to the previous page if the focus is not on a "text" input field (or text area). More
* often than not this is not desirable. The code below attempts to fix this by cancelling the
* key event if the event target is not a text field.
*/
// Inspirations from the following sources:
// http://www.peachpit.com/articles/article.aspx?p=1394321&seqNum=3
// http://unixpapa.com/js/key.html
// http://stackoverflow.com/questions/664631/disable-backspace-and-delete-key-with-javascript-in-ie
// http://stackoverflow.com/questions/6309693/disabling-backspace-key-works-in-all-browsers-but-ie
// http://jimblackler.net/BackspaceTrap.htm
// Essentially cancels event 'e' cross-browser.
function preventDefault(e) {
if(e.preventDefault){
e.preventDefault();
} else {
e.returnValue = false;
}
}
cancelBackspaceKeyEventForHistoryBack = function(e) {
var evt = e || window.event; // 'e' is undefined in IE
var keynum = evt.keyCode;
if (keynum == 8) {
var evtTarget = evt.target || evt.srcElement; // IE uses 'srcElement'
var nodeName = evtTarget.nodeName.toLowerCase();
// New HTML5 input types (http://www.w3schools.com/tags/att_input_type.asp) no listed here yet.
if ((nodeName == 'input' && (evtTarget.type == 'text' || evtTarget.type == 'password'))
|| nodeName == 'textarea') {
return true;
} else {
preventDefault(evt);
}
}
};
document.onkeydown = cancelBackspaceKeyEventForHistoryBack;[/html]
IE 9
If a "non-text" form item is focused when you click backspace IE triggers history->back. In many cases that's really undesirable. Customers forced us to write a JavaScript key-down handler that effectively circumvents this (code at the bottom). That script is directly integrated into the GWT host page.
The side-effects in our SmartGWT code are quite severe, though:
- custom key-down handlers added to FormItems don't fire anymore
- column filters in list grids don't trigger fetch data operations when you remove characters in the filter field
- page-down/page-up keys no longer work in list grids that support paging
- likely more that we haven't found yet
Question: is the script itself faulty e.g. eating events where it shouldn't (we don't think so)? Or is it "wrong" in the first place to combine key-down handlers outside SmartGWT with the ones inside? Is there an easier way to suppress backspace key events outside non-text items?
The code:
[html]/*
* The backspace key is often mapped in browsers as to execute history.back. The user is taken
* back to the previous page if the focus is not on a "text" input field (or text area). More
* often than not this is not desirable. The code below attempts to fix this by cancelling the
* key event if the event target is not a text field.
*/
// Inspirations from the following sources:
// http://www.peachpit.com/articles/article.aspx?p=1394321&seqNum=3
// http://unixpapa.com/js/key.html
// http://stackoverflow.com/questions/664631/disable-backspace-and-delete-key-with-javascript-in-ie
// http://stackoverflow.com/questions/6309693/disabling-backspace-key-works-in-all-browsers-but-ie
// http://jimblackler.net/BackspaceTrap.htm
// Essentially cancels event 'e' cross-browser.
function preventDefault(e) {
if(e.preventDefault){
e.preventDefault();
} else {
e.returnValue = false;
}
}
cancelBackspaceKeyEventForHistoryBack = function(e) {
var evt = e || window.event; // 'e' is undefined in IE
var keynum = evt.keyCode;
if (keynum == 8) {
var evtTarget = evt.target || evt.srcElement; // IE uses 'srcElement'
var nodeName = evtTarget.nodeName.toLowerCase();
// New HTML5 input types (http://www.w3schools.com/tags/att_input_type.asp) no listed here yet.
if ((nodeName == 'input' && (evtTarget.type == 'text' || evtTarget.type == 'password'))
|| nodeName == 'textarea') {
return true;
} else {
preventDefault(evt);
}
}
};
document.onkeydown = cancelBackspaceKeyEventForHistoryBack;[/html]
Comment