jQuery Allowed Chars - simple plugin

jQuery plugin to restrict users for typing only allowed chars for specified element.

This library requires jQuery to be loaded.

Setup

Include jQuery library and the jquery.allowed-chars.js file.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.allowed-chars.js"></script>

Download plugin from jQuery Plugins

You can download jQuery Allowed Chars simple plugin from jQuery Plugins here: http://plugins.jquery.com/jquery.allowed-chars/

Install with Bower

Install and manage jQuery Allowed Chars simple plugin using Bower.

$ bower install jquery.allowed-chars

Install with NPM

Install and manage jQuery Allowed Chars simple plugin using NPM.

$ npm install jquery.allowed-chars

CDN

You can use CDNJS for this plugin on following link: http://www.cdnjs.com/libraries/jquery.allowed-chars

Usage Example

In our HTML code we have 4 inputs:

Only integer chars [0123456789]: 
<input type='text' id="default"/>

Custom chars [a, B, 1, {space}, _]: 
<input type='text' id="custom"/>

RegExp [/\d/] -- only integers: 
<input type='text' id="regexp" />

Custom chars [A, b, s, D] not case sensitive, full options: 
<input type='text' id="full" />

So, to restrict input values to integers for input with id default use:

// by default plugin allows only numerical characters: 0123456789
$('#default').allowedChars();

For a custom allowed char list, pass the string with chars as parameter:

// you can specify a different list of allowed characters,
// for example [a, B, 1, {space}, _]
// list is by default case sensitive
$('#custom').allowedChars('aB1 _');

You can also use a regular expression to restrict input values:

// you can use regular expressions
// \d - only integers allowed
$('#regexp').allowedChars(/\d/);

You can also pass an object with options for plugin initialization:

// you can pass object with options.
// For example, a list of allowed chars, without case sensitivity check
$('#full').allowedChars({
    allowed: 'AbsD',
    caseSensitive: false
});

Be aware that caseSensitive option does not affect work of plugin if you use regular expressions.

Here you can read more about regular expressions in javascript:

• http://www.w3schools.com/jsref/jsref_obj_regexp.asp
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

AngularJS Directive

If you using AngularJS in your project, you can write small Directive to use jQuery Allowed Chars plugin.

First load plugin:

<script type="text/javascript" src="dist/jquery.allowed-chars.js"></script>

Then create your directive for jQuery Allowed Chars plugin:

angular.module('exampleModule').directive('allowedChars', function(){
    return {
        restrict: 'A',
        link: function(scope, element) {
            // allow only digits and low case letters
            element.allowedChars(/[a-z]|[0-9]/);
        }
    };
});

Use new directive in your html element:

Allow only digits and low case letters:
<input type='text' allowed-chars/>

More about Directives in AngularJS read following documentation: https://docs.angularjs.org/guide/directive

Demo

You can run demo on JSFiddle: http://jsfiddle.net/fosco/55XLd/

Copyright

Copyright (C) 2014 Pavlo Voznenko and other contributors.

Distributed under the MIT License.