how to check when field enter/return has been pressed on?

Question

I have multiple fields, typically enter will be pressed on one of the two main ones. I want to know which field enter has been pressed on, how do i do this? (i dont know much JS)

Possible Duplicates

• http://stackoverflow.com/questions/756786/javascript-capture-key
• http://stackoverflow.com/questions/1235716/disable-keyboard-enter-key
• http://stackoverflow.com/questions/1248100/detect-key-event-enter-with-jquery-in-javascript-on-linux-platform

Answer 1

Check for enter and set some hidden field (example uses JQuery):

$('#input_text').keyup(function(e) {
    //alert(e.keyCode);
    if(e.keyCode == 13) {
     alert('Enter key was pressed.');
    }
});

Answer 2

its simple to add an "onkeypress" event to each of the fields, and then in the event handler to examine the keycode that is attached to the event. For example, consider the following code:

form.elements['fieldone'].onkeypress = function(evt) {
   if (window.event) evt = window.event; // support IE
   if (evt.keyCode == 13) alert("Enter was pressed!");
   return true;
}

Please note that under most browsers, pressing ENTER in a form field would post that form. If you don't want that to happen, you can simply return false from the onkeypress handler and that would tell the browser to ignore that key.

Answer 3

Include this in your page, it should fire automatically when you hit any key and tell you which html element had focus when it happened.

<script>
document.onkeypress = KeyPressed;

function KeyPressed(e)
{
    if (!e) e = window.event;

    f ((e.charCode) && (e.keyCode == 13))
    alert('Yay! Enter was pressed while field ' + document.activeElement.id + ' had focus!');
}
</script>

Answer 4

You can check from which element the event bubbled from using something like the following

var text1 = document.getElementById('text1');
var text2 = document.getElementById('text2');
text1.onkeypress = keyPresser;
text2.onkeypress = keyPresser;

function keyPresser(e) {
    // to support IE event model
    var e = e || window.event;
    var originalElement = e.srcElement || e.originalTarget;

    if (e.keyCode === 13) {
      alert(originalElement.id);
    }
}

Here's a Working Demo

I would recommend taking a look at the differences in Browser event models and also at unobtrusive JavaScript .

• QuirksMode - Introduction to Events

• The IE Event Model

• Pro JavaScript Techniques - Unobtrusive Event Binding

Answer 5

Use event delegation to avoid attaching event handlers to a large number of elements:

window.onload = function () {
  document.onkeyup = function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement,
        keyCode = e.keyCode || e.which;

    if (target.tagName.toLowerCase() == 'input' && keyCode == 13) {
      alert('Enter pressed on ' + target.id);
    }
  };
};