Thursday, November 15, 2012

Check if Enter Key has been pressed

I keep forgetting the simple way to check if the Enter Key has been pressed while filling out a form. All too often, users assume the presence of default button for the Enter Key next to textboxes that they fill out...

  1. /*
  2. 1. Check if Enter Key has been pressed
  3. 2. If Enter Key has been pressed,
  4. bind click event with a handler to the default button among siblings.
  5. 3. Trigger click() event
  6. */
  7. $('input[type=text]').bind({
  8. keypress: function( event ) {
  9. if( checkIfEnterKeyPressed() ){ //1.Check if Enter Key has been pressed
  10. var message =
  11. 'Enter key has been pressed while in ' + $(this).attr('id') + '.';
  12. $(this).siblings('.defaultButton').bind( //2. Bind click event handler
  13. 'click',
  14. { msg: message },
  15. function( event ){
  16. alert( event.data.msg + '\n' + $(this).val() + ' has been clicked()' );
  17. }
  18. ).click(); //3. Trigger click event
  19. }
  20. }
  21. });
  22.  
  23. function checkIfEnterKeyPressed() {
  24. var keycode = ( event.keyCode ? event.keyCode : event.which );
  25. return ( keycode == '13' ? true : false );
  26. }




No comments: