jQuery UI Pinpad

View source on Github

This page demonstrates the basic pinpad widget usage.

Default functionality

The pinpad is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive pin pad in a small overlay.

Autocompletion

Confirm the content of the pinpad input automatically when its value reach the maximum length. Set the autoComplete option to true and set one of maxlength attribute of the pinpad input or maxLength option during pinpad creation.

Restrict content length

Restrict the length of the pinpad input content using the minLength and maxLength options.

Custom command

Adding a custom command to the pinpad. By default the pinpad widget contains 3 commands: the cancel, the correct and the confirm command.

Digit only

Use the digitOnly option to accept or not the decimal point.

Display inline

Display the pinpad embedded in the page instead of in an overlay. Set the appendTo option during the pinpad creation to indicate where to generate the widget.

Localize pinpad

Localize the pinpad language (Default: english).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.