Simple captcha component written in pure JavaScript with no dependencies based on canvas element
npm install js-captchaSimple numeric captcha rendered within basic canvas element.
Demo can be seen here.
``console`
npm install js-captcha --save
Just include required JavaScript:
`html``
orjs`
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.
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 |
reset() - generate and render new random numbers
validate()` - validate entered result in input field
Works in every modern browser which has support for canvas element.
js-captcha is licensed under the MIT license.