jac

jquery.allowed-chars

jQuery Allowed Chars Simple Plugin

Showing:

Popularity

Downloads/wk

4

GitHub Stars

6

Maintenance

Last Commit

7yrs ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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 (C) 2014 Pavlo Voznenko and other contributors.

Distributed under the MIT License.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial