.keypress()S2C Home « Events « .keypress()

Keypress event handler.

Description

The .keypress() method is used to bind an event handler to the JavaScript keypress event or trigger that event on the specified element.

  • The keypress event is sent to an element when the user presses a key on the keyboard and can be attached to any element:
    • The event is only sent to the element that has focus.
    • Form elements are a good candidate for this event as they can always get focus, unlike other focusable elements which can vary, dependant upon the browser.
  • If it is a requirement to capture the value of the key that was pressed, attach this behavior to the document object. All key presses will make their way up the DOM to the document object, due to event bubbling unless explicitly stopped within the code:
    • You can examine the event object by passing it to the keypress event handler function to determine which key value was passed. Although browsers use different properties to store this information, jQuery normalizes the which property of the event object so you can reliably use it to retrieve the code value of the key that was pressed. This code corresponds to unicode value for each key on the keyboard, excluding codes for special keys.
  • If you want to capture keystrokes for special/modifier keys that do not have a value, use the .keydown() or .keyup() methods instead.

Syntax

Signature Description
.keypress( )Trigger the keypress JavaScript event on the specified element.
.keydown( handler(eventObject) )Bind an event handler to the keydown JavaScript event.
.keydown( [eventData ,] handler(eventObject) )Bind an event handler to the keydown JavaScript event, optionally passing an object of data.

Parameters

Parameter Description Type
handler( eventObject )A function to execute each time the event is triggered.Function
eventDataAn object of data to pass to the event handler.Anything

Return

A jQuery object.


.keypress( ) Example Top

Trigger the keypress JavaScript event on the specified element.

  • This signature is a shortcut for .trigger('keypress').

In the example below we show a new message in the 'div' element with an id of 'div1' every time the radio button for 'beef pie' is clicked on and released.

When the radio button is pushed and released we trigger off the keypress JavaScript event on the 'div1'. This then fires off the $('#div1').keypress(function(){}) code which outputs the message.


Pie Survey

Which pie do you prefer?:

Select a pie shape: 

div1. Some initial text.



$(function(){
  $('#div1').keypress(function () {
    $('#div1').append('<code>keypress</code> JavaScript event triggered.
                       You like Beef Pie!!<br />');
  });
 
  $('#beef').click(function() {
    $('#div1').keypress();
  });
});


.keypress( handler(eventObject) ) Example Top

Bind an event handler to the keypress JavaScript event.

  • This signature is a shortcut for .on('keypress', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan1' each time the input element with an id of 'input1' below is typed in.

When the input is typed in, the keypress JavaScript event fires off the addText(event) mothod which outputs a message.

What we are doing here is passing across the event object to the function addText(event)method. The data we specify gets tagged onto the event.data property.



$(function(){
  $('#input1').keypress(addText);

  function addText(event) {
    $('#scrollspan1').append('keypress 1 **JavaScript event triggered**<br>');
  }
});

We will show a message here.



.keypress( [eventData ,] handler(eventObject) ) Example Top

Bind an event handler to the keypress JavaScript event, optionally passing an object of data.

  • This signature is a shortcut for .on('keypress', handler).

In the example below we show a new message in the 'p' element with an id of 'scrollspan3' each time the input element with an id of 'input3' below is pressed.

When the input is typed in and the key pressed, the keypress JavaScript event fires off the $('#input2').keypress({ param1: '#scrollspan2', param2: 'keypress 2', param3: '**JavaScript event triggered** ' }, addText2); code.

What we are doing here is passing across the event object to the function addText2(event). The map we specify, in our case { param1: '#scrollspan2', param2: 'keypress 2', param3: '**JavaScript event triggered** ' } gets tagged onto the event.data property. We then access this parameter in the function via event.data.param and use it as part of the appended data.




$(function(){
  $('#input2').keypress({ param1: '#scrollspan2', param2: 'keypress 2 ', 
                          param3: '**JavaScript event triggered**  ' }, addText2);
 
  function addText2(event) {
    $(event.data.param1).append(event.data.param2 +event.data.param3);
  }
});

We will show a message here.