j-Pin

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

A simple PIN maker.

Configuration:

count {Number} a count of PIN inputs (default: 6)
required {Boolean} enables "required" (default: false)
disabled {Boolean} can disabled this control
hide {Boolean} disables displaying of numbers (default: false)
mask {Boolean} disables the mask (default: true)
NEW exec {String} a path to function(pin)
NEW allowpaste {Boolean} enables pin pasting (default: true)

Good to know:

input with no value creates a space
it expects String

Methods:

component.focus() focuses the first input

Use it with <ui-component name="pin">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<div style="padding:50px">
	<div style="width:200px">
		<div style="margin-bottom:5px">PIN 1</div>
		<ui-component name="pin" path="pinA" config="count:4"></ui-component>
	</div>
	<br />
	<div style="width:250px">
		<div style="margin-bottom:5px">PIN 2 (hide:true)</div>
		<ui-component name="pin" path="pinB" config="count:5;hide:true"></ui-component>
	</div>
	<br />
	<div style="width:300px">
		<div style="margin-bottom:5px">PIN 3 (visible)</div>
		<ui-component name="pin" path="pinC" config="count:6;mask:false"></ui-component>
	</div>
</div>