AngularJS: Add enter key to check/uncheck the check box

Sometimes clients want something different. We all know that if we check/uncheck the check box through keyboard then we have do it by space bar. But sometimes clients wants this through enter key in addition to the space bar specially for keyboard only user. So, this code can reduce your effort to write your own.

For AngularJS:

// Assume that your main module name is app, it can be anything you like.
var App = angular.module('app', []);

// Adding as directive.
App.directive('input', ['$interval', function($interval) {
    return {
      restrict: 'E', // It restricts that the directive will only be a HTML element (tag name), not an attribute.
      link: function(scope, elm, attr) {
        if (attr.type === 'checkbox') {
          elm.on('keypress', function(event) {
            var keyCode = (event.keyCode ? event.keyCode : event.which);
            if (keyCode === 13) {
              event.preventDefault(); // only when enter key is pressed.
              elm.trigger('click');
              scope.$apply();
            }
          });
        }
      }
    };
  }
]);

Same thing on jQuery is pretty easy:

jQuery(document).ready(function() {
  jQuery('input:checkbox').keypress(function(event) {
    var keyCode = (event.keyCode ? event.keyCode : event.which);
    if (keyCode === 13) {
      event.stopPropagation(); // only when enter key is pressed.
      this.trigger('click');
    }
  });
});
Advertisements

4 thoughts on “AngularJS: Add enter key to check/uncheck the check box

  1. This is not for general cases, I mentioned sometime you may need. Sometime clients want something different. It was one of my clients requirement, so I thought some one else may need the same thing. It was not recommended for default or general purpose. Thanks for your concern.

  2. this is such a bad idea. Enter key is the default for submitting a form – which is where an input type should live.

Leave a Comment

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