Keydown only with real characters?

Question

simple question: I have input fields with inside-labels! Just like the search-box on this site in the upper right corner. When I start typing the label inside it is hidden.

For accessability reasons I have real tags absolutely positioned behind the actual input field. Therefore I just add a class fill to the inputfield so the background color is no longer transparent.

inputs.keydown(function (e) {
     $(this).addClass(fill);
});

Everything works fine except for a little flaw. Whenever I focus the input field and hit a key like "Shift" "Ctrl" or "CMD" the label disappears. However this is no input yet!

Any idea how to do so?

inputs.keydown(function (e) {
        switch (e.keyCode) {        
            case 13: // Enter
            case 16: // Shift
            case 17: // Ctrl
            case 18: // Alt
            case 19: // Pause/Break
            case 20: // Caps Lock
            case 27: // Escape
            case 35: // End
            case 36: // Home
            case 37: // Left
            case 38: // Up
            case 39: // Right
            case 40: // Down

            // Mac CMD Key
            case 91: // Safari, Chrome
            case 93: // Safari, Chrome
            case 224: // Firefox
            break;
        }

        $(this).addClass(fill);
    });

These would be all the keycodes where I don't want to blur the label! Just when typing real characters the fill-class should be added. Btw. is there a better syntax to write those switch statements with all the cases?

The jQuery event object http://api.jquery.com/category/events/event-object/ has `altKey`,`ctrlKey`,`metaKey`,`shiftKey` properties that you may want to inspect and handle too. — StuperUser, Jan 05 '12 at 12:59

score 5 · Answer 1 · answered Dec 11 '12 at 17:32

5

Use keypress() instead if you're dealing with character inputs. It already takes care of ignoring most of the keys you want to avoid. It does get triggered at Enter, but you can easily account for that in the same manner already proposed here.

$("input").keypress(function (e) {
    if( e.which == 13 ){ return false; }
    $(this).addClass(fill);
}

answered Dec 11 '12 at 17:32

Bruno Lange

720
8
12

And does not seems to be reliable for arrows either: http://stackoverflow.com/questions/19347269/jquery-keypress-arrow-keys – Alex Oct 26 '14 at 05:51

score 3 · Accepted Answer · answered Jan 05 '12 at 12:57

This would only execute the addClass when no case is hit:

inputs.keydown(function (e) {
    switch (e.keyCode) {        
        case 13: // Enter
        case 16: // Shift
        case 17: // Ctrl
        case 18: // Alt
        case 19: // Pause/Break
        case 20: // Caps Lock
        case 27: // Escape
        case 35: // End
        case 36: // Home
        case 37: // Left
        case 38: // Up
        case 39: // Right
        case 40: // Down

        // Mac CMD Key
        case 91: // Safari, Chrome
        case 93: // Safari, Chrome
        case 224: // Firefox
        break;
        default:
          $(this).addClass(fill);
        break;
    }
});

But since you are using jquery and want a smaller solution try this:

inputs.keydown(function (e) {
  if($.inArray(e.keyCode,[13,16,17,18,19,20,27,35,36,37,38,39,40,91,93,224])) return;
  $(this).addClass(fill);
});

Don't do if($.inArray(item, array)) Do if($.inArray(item, array) !== -1) — paulslater19, Jan 05 '12 at 13:34

score 0 · Answer 3 · answered Jan 05 '12 at 12:56

What you can do is get the text length before and after the key press and see if there is a difference. If there is, it was a real char or a paste event, in which case you need to apply the background color.

i.e. Something like:

var dataLength = 0;

// use keyup instead of keydown to ensure that we catch the event after the data has been entered
inputs.keyup(function (e) { 
   if($(this).val().length != dataLength) $(this).addClass(fill);

   ... 

   dataLength = $(this).val().length;

   // re-apply placeholder text if no text
   if(dataLength == 0) $(this).removeClass(fill);
}

Still better, use the jQuery textchange event plugin. http://www.zurb.com/playground/jquery-text-change-custom-event

Keydown only with real characters?

3 Answers3