Universal jquery enter-key binding for any function

var enterkey = function (jquery_obj, func, args) {
 jquery_obj.bind('keypress', function(e) {
  if (e.keyCode==13 && e.shiftKey==false) {
   e.preventDefault();
   func.apply(this, args);
  }
 });
}

This little snippet of code is cleverly designed to allow you to bind any page, textbox, button, with a function that will trigger the moment the enter-key is pressed. Here’s an example:

// Bind the textbox to alert 'Potatomonkies!' when the enterkey is pressed
var potatofunc = function (food, animal, exclamation) { alert(food + animal + exclamation); } 

enterkey($("#textbox"), potatofunc, ['Potato', 'monkies', '!'])

Now, whenever the enterkey is pressed on any element with an id=”textbox”, an alert will show saying “Potatomonkies!”. Easy.

Screen shot 2013-08-30 at 5.43.40 PM

Break it down now.

jquery_obj.bind('keypress', function(e) {

This line is a jquery method for listening for a keypress. Jquery does the heavy lifting, all we need to do is confirm that the keypress is the ‘enterkey’.

  if (e.keyCode==13 && e.shiftKey==false) {
   e.preventDefault();

’13’ is the ascii code for carriage return, IE., the enterkey. It’s convention, when writing in a textbox, to allow the user to hold the shiftkey down when pressing enter to put in an actual new-line instead of submitting. If shift isn’t held down, e.preventDefault() is there to stop the newline from writing.

Now the fun part.

   func.apply(this, args);

function.apply() is a method for manually calling function(), while providing the arguments as a list.

var potatofunc = function (food, animal, exclamation) {
 alert(food + animal + exclamation);
}

The function potatofunc demands three arguments, yet our func.apply(this, args); has only two, and the first argument this appears to do nothing.

This is because the arguments passed to potatofunc was provided when we called bound the enterkey function to potatofunc, as shown below:

var enterkey = function (jquery_obj, func, args)

enterkey($("#textbox"), potatofunc, ['Potato', 'monkies', '!'])

The function enterkey, as the first argument, is given the jquery of items with an id=textbox; the function potatofunc which now triggers on the enterkey as second; and then args, which contains the text to be displayed, as a list of strings.

func.apply(this, args) automatically takes the list [‘Potato’, ‘monkies’, ‘!’] and expands them as the parameters given to potatofunc.

The this in func.apply(this, args) does… well… nothing. It can easily be written as:

func.apply("cats and dogs", args);

And it’ll still work just fine. I’ll leave it up to you to figure that out. 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s