Question

Is there a way to capture backspace key press on a input[type="text"] in BlackBerry? I have tried with $('input[type="text"]').bind('keydown', function(event) { ... }); and it captures all key press events except the one for the backspace (del). Pressing this key does not fire any key event.

Does anyone know a way to capture the event?

I am developing for OS 6.0 and testing with BlackBerry simulator 9800.

EDITED – the code that I am testing

<div id="myPage" data-role="page" data-theme="b">

  <div data-role="content">  
    <input type="text"  id="ddd" />
  </div>

  <script type="text/javascript">
    $('input[type="text"]').bind('keydown', function(e){
      if(e.keyCode == 8)
        alert('backspace trapped')
    });
  </script>

</div>

Answer 1

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 and keyup 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.