This plugin filters keyboard input by specified regular expression.
JavaScript HTML
Switch branches/tags
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
CHANGES.markdown Changelog May 4, 2011
README.markdown GFM for README. May 14, 2012
component.json
index.html
jquery.keyfilter.js Replace jQuery .live with .on May 22, 2017
package.json Create package.json Feb 4, 2017

README.markdown

Introduction

This jQuery plugin filters keyboard input by specified regular expression.

Source code inspired by Ext.JS (Ext.form.TextField, Ext.EventManager), but was modified to provide more accurate logic.

Procedural style

$("#ggg").keyfilter(/[\dA-F]/);

Also you can pass test function instead of regexp. Its arguments:

  • this - HTML DOM Element (event target).
  • c - String that contains incoming character.
$("#ggg").keyfilter(function(c) { return c != 'a'; });

CSS class attribute style

<input type="text" class="mask-num" />

Inputs with CSS classes like this will automatically have the corresponding regexp below applied.

Predefined classes with its regexps

  • mask-pint: /[\d]/
  • mask-int: /[\d\-]/
  • mask-pnum: /[\d\.]/
  • mask-num: /[\d\-\.]/
  • mask-hex: /[0-9a-f]/i
  • mask-email: /[a-z0-9_\.\-@]/i
  • mask-alpha: /[a-z_]/i
  • mask-alphanum: /[a-z0-9_]/i

Using different classes

You can apply these standard regexps to different classes if you wish.

$("input.integer").keyfilter($.fn.keyfilter.defaults.masks.int)

Extensibility

Keyfilter supports extending and changing of list of provided masks.

Example of extending

/*
 * Key filter masks for hosting.
 */

(function($)
{
  var hostingMasks = {
    dir: /[a-z0-9_\/\-\.]/i,
    ftpuser: /[a-z0-9_]/
  };

  $.extend($.fn.keyfilter.defaults.masks, hostingMasks);

})(jQuery);

Override built-in masks to allow french accents

/*
 * Key filter masks supporting french accents.
 */

(function($)
{
  $.extend($.fn.keyfilter.defaults.masks, {
    alpha:    /[a-zéèçàêoe_]/i,
    alphanum: /[a-zéèçàêoe0-9_]/i
  });
})(jQuery);

Overriding

You can fully override masks by simple assignment after the plugin loads but before the document.ready event fires.

$.fn.keyfilter.defaults.masks = { ... };