Bootstrap jQuery widget for x-digit pincode input
You only need a <input type="text"> and Bootstrap.
After entering a pincode the value will be updated in the original textbox. It supports a callback after all digits are entered and backspace is allowed. See Usage below this page to find out all parameters
For touch devices there will be only one input tag created. With the supplied CSS it will look like the user is inputting a code in multiple input boxes.
A demo can be found at fkranenburg.github.io/bootstrap-pincode-input
You can install bootstrap-pincode-input by using npm:
npm install --save bootstrap-pincode-input
Number. Default: 0
Length of to be entered code. For every digit a input box will be created and visibile for the user.
<input type="text" name="mycode" id="pincode-input1">This function will create, for example, an input box with 4 digits.
$('#pincode-input1').pincodeInput({inputs:4});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.
<input type="text" name="mycode" id="pincode-input1">$('#pincode-input1').pincodeInput({inputs:2,placeholders:"0 0 0"});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.
<input type="text" name="mycode" id="pincode-input1">$('#pincode-input1').pincodeInput({inputs:4,hidedigits:false});@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.
$('#pincode-input1').pincodeInput({keydown:function(e){
console.log("keydown event fired!",e);
});Callback function for each input box after user enters or removes a digit. The following parameters are passed to the given function.
inputElement. the DOM input element where user changed a digit.valueString. the value enteredinputnumberNumber. returns the 'position' of the current input.
$('#pincode-input1').pincodeInput({inputs:4,change: function(input,value,inputnumber){
console.log("onchange from input number "+inputnumber+", current value: " + value, input);
}});Callback function when all input boxes have a value (user has entered the full code). The following parameters are passed to the given function.
valueString. complete given code as a string.eventEvent. the last 'keydown' event from last inputbox.errorElementElement. returns the error element where you can put a custom error message for the user, for example the code is invalid.
$('#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");
}});This plugin is available under the [Apache 2.0 license]: https://www.apache.org/licenses/LICENSE-2.0
Created by Ferry Kranenburg
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent