Ajouter un écouteur Even Pour les touches de lettre pressées?

Question

Je me demande comment créer un écouteur d'événement, de sorte que lorsque l'une des touches de caractères est pressée une forme apparaît et la première entrée est en focus et reçoit l'entrée, un peu comme le style de recherche de type web Système d'exploitation 2.0, mais pour un formulaire de contact. Y a-t-il un moyen de le faire? Dans le cas où vous n'êtes pas familier est ici un lien vers le webOS type juste fonction

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

Answer 1

Je ne sais pas si vous ne pouvez souscrire à des touches de lettres. Votre meilleur pari serait d'utiliser jQuery pour vous abonner à .keydown()/.keyup() et vérifier le code clé de l'événement pour voir de quelle lettre il s'agit. Si ce n'est pas une lettre, ne faites rien.

Comme ceci:

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

Plus sur $.keydown.

Liste des key codes.

Answer 2

Utilisez l'événement keypress pour tout ce qui concerne les caractères. keydown et keyup ne peuvent pas être utilisés de manière fiable à cette fin. Ce qui suit est adapté de 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!"); 
    } 
};