Determine if input keyEvent added or removed something

Question

Suppose I am catching a keyup event with jQuery on an input field. Now I am doing various things with the event, for example reacting to the tab or enter key. Now I want to determine if a key like tab, control, alt, shift was pressed or a key that actually alters the input like letters, numbers, punctuation etc.

Is there any way to determine this? How do I make sure to check all the right keys any user anywhere could press?

I hope my problem is clear.

Edit 1:

Well, I was a little fast there with closing the question. There is still a problem. My solution so far (JSFiddle):

$('input').keyup(function(e) {
    var lastValue = '';
    if(typeof $(this).attr('data-last-value') != 'undefined' && $(this).attr('data-last-value') != '') {
        lastValue = $(this).attr('data-last-value');
    }

    if(lastValue != $(this).val()) {
        //This is what I wanted.
    }

    $(this).attr('data-last-value', $(this).val());
});

Problem: If the user for example entered 'hello' into the input, then selects the 'h' and presses the h-key, the script does not recognize it as one of the desired key presses, because the value was not altered. IS there any way around this behavior?

Answer 1

Maybe one of possible solutions would be to save length of input before altering the input and on some event check the new lengh i.e.:

var inputsLength = {};

$(window).keydown(function (e){
  var input = e.eventTarget,
      name = input.name,
      oldLength = inputsLength[name];

  if (!oldLength) {
    inputsLength[name] = input.length
  }

  if (oldLength !== input.length) {
    //something change
  } else {
    //everything is the same
  }

  if (e.ctrlKey) alert("control");
});

Alternative solution for your updated question would be to use "input" event which captures only what you really want in this situation.

$(window).on('input', function(e) {
    //Do what you need
});

P.S. have in mind that this does not work IE < 9 and is a little buggy in IE 9. But for your needs I think it should be a good fit

Answer 2

In short, KeyCodes.

$('element').keyup(function (e) {
    var event = e || window.event; //for firefox mainly
    switch (e.keyCode) {
        case 13:
            //do something here (keycode 13 is enter)
            break;
        //continue for all keycodes you are checking for
    }

    //alternatively
    var modKeys = [69, 70, 71]; //ect... (keys which will modify the input)
    var otherKeys = [9, 13, 16]; // ect... (keys which wont)

    if ($.inArray(e.keyCode, modKeys)) {
        //code for modification key
    } else if ($.inArray(e.keyCode, otherKeys)) {
        //code for non-modification keys
    }
});

EDIT: For a list of keycodes: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 3

$(window).keydown(function (e){
    if (e.ctrlKey) alert("control");
});

The list of modifier keys:

e.ctrlKey
e.altKey
e.shiftKey

Answer 4

Try this

<input type="text" id="txtboxToFilter" />

(document).ready(function() {
    $("#txtboxToFilter").keyu[(function(event) {

        if (event.ctrlKey == true)
            alert("control key pressed");
        //or you can do something like this also using key codes
        if (event.keyCode == 9)
            alert("tab key pressed");

        }

    });
});

JavaScript Key Codes