jquery-mobileblackberrykeyeventblackberry-simulatorjquery-events

Capture backspace key press in BlackBerry with jQueryMobile

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>
Solution

  • 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: