A JQuery PIN plugin written in Typescript.
To build jquery-pin, run npm run build.
The compiled output will be in dist directory.
To use jquery-pin, import dist/pin.js via <script> tag.
The PIN widget is represented by the following DOM structure:
<div id="pincode" class="pin-code"></div>Then, in JS, a PIN widget can be initialized by, for example:
$('#pincode').PIN({
placeholder: 'PIN...', // Placeholder to be shown on small size screen.
digit: 3, // PIN's digit.
type: 'password', // Input type.
callback: (code) => alert(`[PIN] ${code}`) // PIN entered callback.
});The code parameter in PIN callback refers to the code that user entered.
This callback is to be invoked every time when PIN is entered.
Once the PIN widget is initialized, you'll get the following DOM structure:
<div id="pincode" class="pin-code">
<input class="pincode-mobile-input" type="text" placeholder="PIN...">
<div class="pincode-inputs-container">
<input class="pincode-input" type="password" data-digit="1">
<input class="pincode-input" type="password" data-digit="2">
<input class="pincode-input" type="password" data-digit="3">
</div>
</div>See test/example.html and src/test.ts.
MIT