5

I have a need for an input (type='text') to go send results to the my server to check availability of something typed by the user.

I use the delegate to add the event handlers to the elements:

$(document).delegate('#signup', 'pageshow', function() {
    var keydown = function(e) {
        e = e || window.event;
        var char = e.which || e.keyCode;
        if (char == 8) {
            $(".pagemessage").text("Pressed: '<BACKSPACE>'");
            appcheckDomainOnKeyDown();
        }
        return true;
    };

    var keyup = function(e) {
        e = e || window.event;
        var char = e.which || e.keyCode;
        if (char == 8) {
            appcheckDomainOnKeyUp();
        }
        return true;
    };

    var keypress = function(e) {
        e = e || window.event;
        var char = e.which || e.keyCode;
        var str = String.fromCharCode(char);
        $(".pagemessage").text("Pressed: '" + str +"'");
        if (/[a-zA-Z0-9-\._]/.test(str) || char == 8 || char == 9) {
            appcheckDomainOnKeyDown();
            appcheckDomainOnKeyUp();
            return true;
        }
        return false;
    };

The key handers work perfectly on my desktop but not on a mobile device. Hopefully you can see that I'm trying to allow certain characters into the box (and a backspace to delete the characters.

From the fact I cannot see the pagemessage element update, 'keypress' does not seem to be trapped. I tried handling this in the keyup/keydown, but I'm not sure how to apply the shiftKey bits to get an actual character pressed - for example pressing + 5 would give '%' however in the keydown it returns shiftKey and 5.

I read the documentation and the closest I could find to 'keypress' was a 'tap' event, but that didn't work either.

I have tried trapping the 'keypress' event as suggested in one post here, and on a desktop this does not trap the backspace, and does nothing at all on a mobile device.

I then tried this as suggested in another post:

    var inputEV = 'oninput' in window ? 'input' : 'keyup';
    $("#new_domain").off(inputEV);
    $("#new_domain").on(inputEV, function (e) {
        keydown(e);
        keyup(e);
    });

and it does not work in either desktop browser or mobile device.

I then tried changing the input type to 'search', and I get a pretty enhancement, that a keypress does add a clear button... but does nothing on the mobile device regarding my own functionality.

I think I have run out of things to try, the only thing left is to add a button to go check - and no one wants that :)

Anyone know how I can do what I need?

In case it's relevant, I'm using chrome on my desktop and android device (HTC one, and Nexus 5)

Nigel Johnson
  • 522
  • 1
  • 5
  • 21

1 Answers1

3

Keyup should work. It works in this example: http://jsbin.com/aNEBIKA/2/. That tested find on my Galaxy S3. Each keypress updates the footer h3 element with the text entered.

Could it be that you are binding your listeners at the wrong time? The documentation does suggest binding like this:

$(document).bind('pageinit')

http://demos.jquerymobile.com/1.2.0/docs/api/events.html

shanabus
  • 12,989
  • 6
  • 52
  • 78
  • I just udated the app to print stuff to a div as well and is seems that (e.which || e.keyCode) is always zero on my device. What other options are there. My problem seems to stem from the wanting to not allow certain characters. 'keypress' is not supported, but the right place... I may have to add a keyup trigger to check the last value of the input box and remove it if it is invalid.... the user will see that though :( – Nigel Johnson Jan 14 '14 at 16:11