Skip to content

pvoznenko/jquery-allowed-chars-simple-plugin

Repository files navigation

jQuery Allowed Chars - simple plugin

Build Status NPM version

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:

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.