2

I am wondering how to create an event listener, so that when any of the character keys are pressed a form pops up and the first input is in focus and is receiving the input, sort of like the just type search style for the webOS 2.0 operating system, but for a contact form. Is there anyway to do so? In case your not familiar here is a link to the webos just type feature

http://www.youtube.com/watch?v=ixPsB7-tVGo

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
mcbeav
  • 11,893
  • 19
  • 54
  • 84
  • 3
    i don't know if you can *only* subscribe to letter keys. your best bet would be to use jQuery to subscribe to `.keydown()` / `.keyup()` and check the keycode of the event to see which letter it is. if it's not a letter, don't do anything. – RPM1984 Nov 15 '10 at 09:32
  • 1
    @RPM - you should make that an answer so I can vote it up properly – nickf Nov 15 '10 at 09:40
  • @nickf - as you wish. :) – RPM1984 Nov 15 '10 at 09:54

2 Answers2

7

I don't know if you can only subscribe to letter keys.

Your best bet would be to use jQuery to subscribe to .keydown() / .keyup() and check the keycode of the event to see which letter it is. If it's not a letter, don't do anything.

Like this:

$('#target').keydown(function(event) {
  if (event.keyCode >= 65 && event.keyCode <= 90) { // if a letter pressed
     // play that funky music.  
  }
});

More on $.keydown.

List of key codes.

RPM1984
  • 72,246
  • 58
  • 225
  • 350
  • wow! thanks so much! thats perfect. I really appreciate the help. So simple, and i couldn't think of that. – mcbeav Nov 15 '10 at 09:56
  • @mcbeav - no worries. Sometimes the best solutions are the simplest ones. – RPM1984 Nov 15 '10 at 10:11
  • Use `keypress` instead. `keydown` and `keyup` cannot be used reliably to detect character information. – Tim Down Nov 15 '10 at 11:11
  • @Tim Down - yes, good point. Also `keypress` is not fired for non-character keys (AFAIK), so will it ever be a ctrl/alt keypress? – RPM1984 Nov 15 '10 at 11:32
  • Quick question if any of you guys could help. I have it set to onkeypress the form pops up and the input is set to focus, but since the listener is waiting for that first keypress, the first letter typed is not input into the input. Is there an easy way to grab that first keypressed and insert it into the input as the first letter? – mcbeav Nov 15 '10 at 12:31
  • are you opening the popup with window.open? if so, you pass the letter as a QS param. If its not a popup (ie its an absolute positioned hidden div or something), then just set a JS variable. – RPM1984 Nov 15 '10 at 21:10
  • Note: For a window-scope hotkey, put it on "$(document)". However: child elements can listen to the event and prevent it from bubbling up to parent elements. See info in jquery.keypress and jquery.keydown. – Curtis Yallop Mar 12 '16 at 01:25
5

Use the keypress event for anything character related. keydown and keyup cannot be used reliably for this purpose. The following is adapted from my answer to a related recent question:

function isCharacterKeyPress(evt) {
    if (typeof evt.which == "undefined") {
        // This is IE, which only fires keypress events for printable keys
        return true;
    } else if (typeof evt.which == "number" && evt.which > 0) {
        // In other browsers except old versions of WebKit, evt.which is
        // only greater than zero if the keypress is a printable key.
        // We need to filter out backspace and ctrl/alt/meta key combinations
        return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8;
    }
    return false;
}

var input = document.getElementById("your_input_id");
input.onkeypress = function(evt) {
    evt = evt || window.event;

    if (isCharacterKeyPress(evt)) {
        // Do your stuff here
        alert("Character!");
    }
};
Community
  • 1
  • 1
Tim Down
  • 318,141
  • 75
  • 454
  • 536