jc

js-captcha

Tiny captcha component (~2KB) written in pure JavaScript with no dependencies

Showing:

Popularity

Downloads/wk

58

GitHub Stars

38

Maintenance

Last Commit

1mo ago

Contributors

5

Package

Dependencies

0

Size (min+gzip)

0.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

JavaScript Captcha

Simple captcha component (<2KB) written in pure JavaScript with no dependencies

Simple numeric captcha rendered within basic canvas element.

Demo

Demo can be seen here.

Install

npm install js-captcha --save

Usage

Just include required JavaScript:

<script src="jCaptcha.js"></script>

or

import jCaptcha from 'jCaptcha';

Define main captcha input element in HTML:

<input class="jCaptcha" type="text" placeholder="Type in result please">

Initialize it:

<script>
    let myCaptcha = new jCaptcha({
        el: '.jCaptcha',
        canvasClass: 'jCaptchaCanvas',
        canvasStyle: {
            // required properties for captcha stylings:
            width: 100,
            height: 15,
            textBaseline: 'top',
            font: '15px Arial',
            textAlign: 'left',
            fillStyle: '#ddd'
        },
        // set callback function for success and error messages:
        callback: ( response, $captchaInputElement, numberOfTries ) => {
            if ( response == 'success' ) {
                // success handle, e.g. continue with form submit
            }
            if ( response == 'error' ) {
                // error handle, e.g. add error class to captcha input

                if (numberOfTries === 3) {
                    // maximum attempts handle, e.g. disable form
                }
            }
        }
    });
</script>

And then call validate() method when required (e.g. on form submit event):

<script>
    myCaptcha.validate();
</script>

No stylings included, just style it as you wish, see options below.

Options

jCaptcha can take an optional parameter - an [Object] of key/value settings:

NameRequiredTypeDefaultDescription
elfalse[String]'jCaptcha'CSS class for input element
requiredValuefalse[String]'*'Render new random numbers on error validate
resetOnErrorfalse[Boolean]trueMandatory field indicator
focusOnErrorfalse[Boolean]trueFocus input field on error validate
clearOnSubmitfalse[Boolean]true'Clear input value on every validate
callbackfalse[Function]nullAs invoked function these useful arguments are returned: response (type: String, value: 'success' or 'error'), captcha (type: Element) and number of tries (type: Number)
canvasClassfalse[String]'jCaptchaCanvas'CSS class of canvas captcha
canvasStyletrue[Object]{}Canvas stylings object, required for canvas appearance
canvasStyle.widthfalse[Number]nullWidth of canvas captcha element (in px)
canvasStyle.heightfalse[Number]nullHeight of canvas captcha element (in px)
canvasStyle.fontfalse[String]''Font size and font family of canvas captcha element
canvasStyle.fillStylefalse[String]''Text color of canvas captcha element
canvasStyle.textAlignfalse[String]''Text align of canvas captcha element
canvasStyle.textBaselinefalse[String]''Text baseline of canvas captcha element

API

reset() - generate and render new random numbers

validate() - validate entered result in input field

Browser support

Works in every modern browser which has support for canvas element.

License

js-captcha is licensed 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