Fire An Event When Pressing Enter Key - onEnter.js

File Size: 15.2 KB
Views Total: 1656
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Fire An Event When Pressing Enter Key - onEnter.js

A jQuery onEnter plugin that fires an event immediately when the users press the Enter key on a given element.

Ideal for form elements that prevent the form submit and automatically move the focus to the next form field when you press the Enter key.

How to use it:

1. Download and import the onEnter plugin together with the latest jQuery library into the html document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.onEnter.js"></script>

2. Bind the Tab key to the Enter key when pressed.

<form>
  <label for="email">Email address:</label>
  <input type="email" id="email">
  <label for="pwd">Password:</label>
  <input type="password" id="pwd">
  <button type="submit">Submit</button>
</form>
$(function(){
  $('#email').onEnter('tab');
  $('#pwd').onEnter('tab');
});

3. Execute a callback function after you pressed the Enter key.

$('#email').onEnter('tab', function(element, args){
  // do something
}, 'args to pass');

4. Bind a custom event to the Enter key.

$('#email').onEnter(function(){
  // do something
});

$('#pwd').onEnter(function(){
  // do something
});

This awesome jQuery plugin is developed by designly1. For more Advanced Usages, please check the demo page or visit the official website.