Bootstrap jQuery widget for x-digit pincode input
npm install ao-bootstrap-pincode-inputbash
bower install bootstrap-pincode-input
`
Or you can install it through npm:
`
npm install --save bootstrap-pincode-input
`
Usage
$3
Number. Default: 0
Length of to be entered code. For every digit a input box will be created and visibile for the user.
`html
`
This function will create, for example, an input box with 4 digits.
`javascript
$('#pincode-input1').pincodeInput({inputs:4});
`
$3
String. Default: `null`
Place placeholders in every input. Make sure you define a placeholder for each input seperated with a `space`.
For example an input with 3 digits, placeholders are defined like `1 2 3`.
`html
`
`javascript
$('#pincode-input1').pincodeInput({inputs:2,placeholders:"0 0 0"});
`
$3
Boolean. Default: `true`
By default entered digits are hidden visually (like a password input) for the user.
This can be overriden by setting this to `false`.
`html
`
`javascript
$('#pincode-input1').pincodeInput({inputs:4,hidedigits:false});
`
$3
@deprecated since 1.3.0 -> will be removed in a later release. Use change event instead.
Callback function for keydown event for each input box. The `keydown` event is passed to the callback.
`javascript
$('#pincode-input1').pincodeInput({keydown:function(e){
console.log("keydown event fired!",e);
});
`
$3
Callback function for each input box after user enters or removes a digit.
The following parameters are passed to the given function.
* `input` Element. the DOM input element where user changed a digit.
* `value` String. the value entered
* `inputnumber` Number. returns the 'position' of the current input.
`javascript
$('#pincode-input1').pincodeInput({inputs:4,change: function(input,value,inputnumber){
console.log("onchange from input number "+inputnumber+", current value: " + value, input);
}});
`
$3
Callback function when all input boxes have a value (user has entered the full code).
The following parameters are passed to the given function.
* `value` String. complete given code as a string.
* `event` Event. the last 'keydown' event from last inputbox.
* `errorElement` Element. returns the error element where you can put a custom error message for the user, for example the code is invalid.
`javascript
$('#pincode-input1').pincodeInput({inputs:6,complete:function(value, e, errorElement){
console.log("code entered: " + value);
/do some code checking here/
$(errorElement).html("I'm sorry, but the code not correct");
}});
``