Capture backspace key press in BlackBerry with jQueryMobile

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>

Hendrika

This answer maybe what you want : #942537 – Digiacomo

Thank you for the link, but what I want is to capture the event using Javascript, as I am not programming a native application for Blackberry. In my case, pressing the backspace key does not fire any event (not keypress, neither keydown or keyup). – Hendrika

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.

Weihs

A very interesting workaround. I did not know about input event before. Thank you very much for such a detailed answer! :-) – Hendrika

@Hendrika - You're welcome :) I was struggling with this issue on Blackberry for the best part of 2 days. I'm going to continue playing around with it when I get time to try and resolve the issue that pressing backspace when the input is empty doesn't fire an event, but for my current purposes the workaround described was sufficient. – Weihs

Answer 2

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

Graphology

It does not work. I already tested it. Not keypress, neither keyup or keydown capture the event of pressing the backspace key in BlackBerry simulator 9800. – Hendrika

I have updated the code, and shared a demo as well on jsfiddle, if it also does not work, share more of your code, that I can see. – Graphology

It works on Chrome as you explained, but unfortunatelly it does not work on BlackBerry simulator (I opened link to jsfiddle from BlackBerry browser and it does not capture the backspace press). I have tried with a very simple page similar as yours. I have edited the question adding the code. – Hendrika

Doesn't matter if you tested it on Chrome it's suppose to work on BlackBerry OS6! – Pythian

Thank you for your help, but that seems only to work in WebWorks applications, which is not my case. When I include your code, it seems not to recognize the blackberry Javascript variable. Apart from that, there is no KEY_BACKSPACE or KEY_DEL (only KEY_BACK), so I think it is not mapped. – Hendrika

Well, you get the bounty award for your effort, but I can not accept the answer, as it is not right, sorry. Anyway, thank you for your help . – Hendrika

@RabNawaz - The problem is only apparent in Blackberry 6 (I've tested it in 5, 6 and 7). I've managed to come up with a workaround at last (see my answer). – Weihs

Answer 3

You can use this http://jsbin.com/ezucen/13/ to see what keycode you are getting back. On BlackBerry 9900 7.1 I am getting keyCode 8.

Crocein

I tested your code but unfortunatelly, as with the first code in the answer by CoDe aDDict, pressing the backspace key does not fire any key event, as others do. No code is printed when I press that key. – Hendrika

It is only Blackberry 6 that seems to have this issue. I've tested on 5, 6, and 7. See my answer for a workaround. – Weihs

Answer 4

There is no way to accomplish this in the general browser.

The only way to track the back key event using JavaScript is to use a Widget/WebWorks application using KEY_BACK API.

Crosswise

Thank you, but as I replied in the first answer, I am not developing a WebWorks application and, apart from that, backspace key does not seem to be mapped. – Hendrika