bootstrap-pincode-input

Bootstrap pincode-input

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.

Demo

A demo can be found at fkranenburg.github.io/bootstrap-pincode-input

Installation

You can install bootstrap-pincode-input by using npm:

npm install --save bootstrap-pincode-input

Usage

inputs

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});

placeholders

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"});

hidedigits

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});

keydown

@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);
});

change

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.

   $('#pincode-input1').pincodeInput({inputs:4,change: function(input,value,inputnumber){
       console.log("onchange from input number "+inputnumber+", current value: " + value, input);
    }});

complete

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.

      $('#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");
        }});

License

This plugin is available under the [Apache 2.0 license]: https://www.apache.org/licenses/LICENSE-2.0

Created by Ferry Kranenburg