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)

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)

• javascript
• html
• post

• None of the dups are really dups: 756786 and 1235716 are about blocking (which is specifically not what this question is about), 1248100 is jquery specific while this question is by someone who does not use jquery, and 1364780 is this one. – Guss Commented Sep 2, 2009 at 14:34

5 Answers 5

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.

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.');
    }
});

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>

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 remend 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

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);
    }
  };
};