Capture backspace key press in BlackBerry with jQueryMobile
I have just come up against this annoyance, and found this question in my search for answers, so here are details of my investigation and solution (well, workaround).
The keyup
and keydown
events simply will not be triggered on input
or textarea
elements in the Blackberry browser when the backspace key is pressed. It will, however, be triggered when the event handler is bound to the document
:
$("#myInput").keydown(someFn); //Will not fire for backspace
$(document).keyup(someFn); //Will fire for backspace
Why this is the case, I have absolutely no idea. The keyup
event should bubble, and it does, but since it doesn't even fire when you press the backspace key, that's not much use.
However, there is another event at our disposal. The input
event is supported by the Blackberry browser, and correctly fires any time the value of the element changes (including, fortunately for us, when that change is due to a press of the backspace key).
Therefore, we can kind of workaround the problem by binding event handlers to both keydown
and input
. The keydown
event will fire before input
, except if the backspace key is pressed, in which case keydown
won't fire. So we can keep track of that quite easily:
function handler(e) {
if (e.keyCode === 8) {
alert("Backspace!"); //Backspace was pressed :)
}
}
var elem = document.getElementById("example");
elem.addEventListener("keydown", function (e) { //Bind to keydown event
this.keydownFired = true; //Remember that keydown fired in expando property
handler.call(this, e); //Call the event handler
}, false)
elem.addEventListener("input", function (e) { //Bind to input event
if (!this.keydownFired) { //Keydown didn't fire, must have pressed backspace
e.keyCode = 8; //Fix the event object
handler.call(this, e); //Call the event handler
}
delete this.keydownFired; //Clean up so we can handle next key press
}, false);
Some notes:
As far as I can tell this is only an issue in the browser on Blackberry 6. I've tested Blackberry 5 (physical device and simulator) and 7 (simulator) and both will fire the
keydown
andkeyup
events for the backspace key.This "fix" works in almost every single browser I have tested it in (so you can use it to properly support Blackberry 6 without breaking other browsers) except Opera Mobile (tested in version 12), which for some reason likes to fire the
input
event twice sometimes.This only allows you to detect backspace presses when there is text in the input to delete (otherwise the
input
event doesn't fire). This is probably the biggest downfall of the script.You can find a working example here, but for mobile device testing it's quicker to load the embedded version.
the following code, works fine. you can see it on jsfiddle . tested it on chrome
$(document).ready(function() {
$('input[type="text"]').bind('keydown', function(e){
if(e.keyCode == 8)
alert('backspace trapped')
});
});
for Blackberry use
function captureBackButton() {
blackberry.system.event.onHardwareKey(blackberry.system.event.KEY_BACK,
function() {
alert('Backspace Pressed')
});
}
see detail