Numeric Keypad To Allow Only Numbers Into Input Fields

Let’s have some fun with form input fields and allow only numbers to be entered into text field via custom styled keypad. The goal here is not to make a plugin that will have a bunch of options, and other probably not needed stuff, but to simply give users a styled numeric keypad upon field focus, and forbid all other events on the field. As you are about to see, keypad is styled only with CSS and can easily be customized.

First of all, here is the plugin code:

/*!
* JQFNumKeypad
* http://www.jqueryfun.com/
*/
(function($) {
  $.fn.JQFNumKeypad = function(options) {
    // Defaults
    var defaults = {
      fadeSpeed: 400,
      clearText: 'Clear'
    };
    // Extend options
    var options = $.extend(defaults, options);
    // Hide keypad on document click
    $(document).click(function() {$('.jqfnumeric').fadeOut('fast');});
    // Loop each instance
    return this.each(function() {
      // Instance
      var instance = $(this);
      // Keypad layout
      var keypad = '<div id="jqfnumkeypad_' + instance.attr('name') + '" class="jqfnumkeypad"><div class="jqfnumkeypad_keypad"><table width="100%" cellpadding="0" cellspacing="0">';
      for(var i = 1; i <= 9; i++) {
        if((i-1)%3 == 0) keypad += '<tr>';
        keypad += '<td class="jqfnumkeypad_digit">' + i + '</td>';
        if(i%3 == 0) keypad += '</tr>';
      }
      keypad += '<tr><td class="jqfnumkeypad_digit">0</td><td class="jqfnumkeypad_clear" colspan="2">' + options.clearText + '</td></tr></table></div></div>';
      $(keypad).insertAfter(instance).css({left: instance.position().left, top: instance.position().top + instance.outerHeight()});
      // Prevent hide on click
      instance.click(function(e) {e.stopPropagation();});
      // Define on focus event
      instance.focus(function() {
        // Hide all opened keypads
        $('.jqfnumkeypad').hide();
        $('#jqfnumkeypad_' + instance.attr('name')).fadeIn(options.fadeSpeed, function() {
          // Digit click
          $('#jqfnumkeypad_' + instance.attr('name') + ' .jqfnumkeypad_digit').unbind().bind('click', function(e) {
          if(instance.attr('maxlength') == -1 || instance.val().length < instance.attr('maxlength')) instance.val(instance.val() + parseFloat($(this).html()));
            e.stopPropagation();
          });
          // Clear click
          $('#jqfnumkeypad_' + instance.attr('name') + ' .jqfnumkeypad_clear').unbind().bind('click', function(e) {
            instance.val('');
            e.stopPropagation();
          });
        });
        // Blur to prevent instance events
        instance.blur();
      });
    });
  }
})(jQuery);

So, what is the catch? The catch is to allow user to click on the field, show the keypad, and immediately blur or focus out of the field. This means that users will not be able to enter anything into the field itself, but only to click on given keys. Also there is a clear key which users can use to clear out the field if they have clicked on a wrong digit. On the end, this small plugin also respects the maxlength attribute of the field, so if you have specified it, users won’t be able to enter more digits than you have set as maximum.

Here is the CSS styling file:

/* Main wrapper */
.jqfnumkeypad {position: absolute; display: none; width: 115px; padding: 1px; font-family: Arial; font-size: 12px; font-weight: bold; color: #646464; background: #ffffff; border: 1px solid #d6d6d6;}
/* Digit wrapper */
.jqfnumkeypad .jqfnumkeypad_keypad {display: block; padding: 4px; background: #e6e6e6;}
/* Digit */
.jqfnumkeypad .jqfnumkeypad_digit {cursor: pointer; width: 33%; padding: 5px 0; font-size: 12px; text-align: center; color: #424242; border-bottom: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; border-top: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0;}
/* Clear */
.jqfnumkeypad .jqfnumkeypad_clear {cursor: pointer; padding: 5px 0; font-size: 12px; text-align: center; color: #424242; border-bottom: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; border-top: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0;}

As you can see styling is very simple, and here are few usage examples:

// Default options
$('input field selector').JQFNumKeypad();
// Change clear text
$('input field selector').JQFNumKeypad({clearText: 'Clean'});
// Change fade in speed
$('input field selector').JQFNumKeypad({fadeSpeed: 500});

Keypad is made out of one wrapping div, one inner div, and a table inside in order to avoid possible problems with browser compatibility. And there you go. Play with it, make it a part of your form, or provide me with feedback whether you like it, dislike it, or even if you want some additional info or functionality.

For those of you who don’t believe until you see, here is a tailored demo page where you can see JQFNumKeypad in action.

For those of you who actually need this, use the download link below to obtain your copy of the zipped archive which contains JQFNumKeypad plugin file, CSS style sheet file, and previously mentioned demo page.

Download JQFNumKeypad.zip