# js-captcha

> Simple captcha component written in pure JavaScript with no dependencies based on canvas element

Latest version **1.2.2** (published 2025-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install js-captcha
pnpm add js-captcha
yarn add js-captcha
bun add js-captcha
```

## Health

**Score 48/100 (D)** — status: stable.

Positive: has types package; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2025-06-19 |
| First published | 2017-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/js-captcha) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 46.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 84 |
| Author | Robert Velickovski |
| Maintainers | robiveli |
| Keywords | captcha, vanilla, simple, dependency-free, lightweight, javascript |

## Links

- npm: https://www.npmjs.com/package/js-captcha
- Repository: https://github.com/robiveli/js-captcha
- Homepage: https://github.com/robiveli/js-captcha#readme
- Issues: https://github.com/robiveli/js-captcha/issues
- npm.io page: https://npm.io/package/js-captcha

## Recent versions

- 1.2.2 (latest) — 2025-06-19
- 1.3.0 — 2020-05-24
- 1.1.1 — 2018-10-28
- 1.2.0 — 2017-09-10
- 1.1.0 — 2017-08-30
- 1.0.0 — 2017-08-27

## README

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

Simple numeric captcha rendered within basic [canvas element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas).

### Demo ###

Demo can be seen [here](https://robiveli.github.io/js-captcha/).

### Install ###

```console
npm install js-captcha --save
```

### Usage ###

Just include required JavaScript:
```html
<script src="jCaptcha.js"></script>
```
or
```js
import jCaptcha from 'jCaptcha';
```
Define main captcha input element in HTML:
```html
<input class="jCaptcha" type="text" placeholder="Type in result please">
```

Initialize it:
```html
<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):
```html
<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:

 Name                | Required | Type          | Default     | Description |
| ---                | ---      | ---           | ---         | ---         |
| el                 | false     | [String]      | 'jCaptcha'  | CSS class for input element |
| requiredValue      | false    | [String]      | '*'         | Render new random numbers on error validate |
| resetOnError      | false    | [Boolean]      | true         | Mandatory field indicator |
| focusOnError      | false    | [Boolean]      | true         | Focus input field on error validate |
| clearOnSubmit     | false    | [Boolean]      | true'         | Clear input value on every validate |
| callback          | false    | [Function]     | null         | As invoked function these useful arguments are returned: response (type: *String*, value: *'success'* or *'error'*), captcha (type: *Element*) and number of tries (type: *Number*) |
| canvasClass       | false    | [String]      | 'jCaptchaCanvas'         | CSS class of canvas captcha
| canvasStyle      | true    | [Object]      | {}         | Canvas stylings object, required for canvas appearance |
| canvasStyle.width      | false    | [Number]      | null         | Width of canvas captcha element (in px) |
| canvasStyle.height      | false    | [Number]      | null         | Height of canvas captcha element (in px) |
| canvasStyle.font      | false    | [String]      | ''         | Font size and font family of canvas captcha element |
| canvasStyle.fillStyle      | false    | [String]      | ''         | Text color of canvas captcha element |
| canvasStyle.textAlign      | false    | [String]      | ''         | Text align of canvas captcha element |
| canvasStyle.textBaseline      | false    | [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](http://caniuse.com/#feat=canvas-text).

### License  ###

js-captcha is licensed under the [MIT license](http://opensource.org/licenses/MIT).

---
_Source: https://npm.io/package/js-captcha · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._