JavaScript Captcha #

$3

Simple numeric captcha rendered within basic canvas element.

$3

Demo can be seen here.

$3

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

$3

Just include required JavaScript:
`html

`
or
`js
import jCaptcha from 'jCaptcha';
`
Define main captcha input element in HTML:
`html

`

Initialize it:
`html

`

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

`

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

$3

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 |

$3

reset() - generate and render new random numbers

validate()` - validate entered result in input field

$3

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

$3

js-captcha is licensed under the MIT license.