Custom Pin Code Input Plugin with jQuery Bootstrap - Free Download Custom Pin Code Input Plugin with jQuery and Bootstrap

Free Download Custom Pin Code Input Plugin with jQuery and Bootstrap

Posted on

This time I will share jQuery Plugin and tutorial about Custom Pin Code Input Plugin with jQuery and Bootstrap, hope it will help you in programming stack.

Custom Pin Code Input Plugin with jQuery Bootstrap - Free Download Custom Pin Code Input Plugin with jQuery and Bootstrap
File Size: 55.3 KB
Views Total: 22796
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Pincode Input is a jQuery plugin that turns the regular text field into a Bootstrap-styled pin code input as you seen in the SIM card PIN management.

Licensed under the Apache-2.0.


  • Auto jumps to next slot.
  • Executes a callback after all inputs are filled in.
  • Supports unlimited amount of digits.

Basic usage:

1. Include the needed jQuery library and Bootstrap’s CSS on the webpage.

1 <link href="/path/to/bootstrap.min.css" rel="stylesheet">
2 <script src="/path/to/jquery.min.js"></script>

2. Download and include the Bootstrap Pincode Input plugin’s JS and files in the webpage.

1 <link href="bootstrap-pincode-input.css" rel="stylesheet">
2 <script src="bootstrap-pincode-input.js"></script>

3. Create a text field for the pin code input.

1 <input type="text" id="demo">

4. Initialize the plugin.

1 $('#demo').pincodeInput();

5. Plugin’s default options.

01 $('#demo').pincodeInput({
03   // 4 input boxes = code of 4 digits long
04   inputs:4,       
06   // hide digits like password input            
07   hideDigits:true,  
09   // keyDown callback            
10   keydown : function(e){},
12   // callback on every input on change (keyup event)
13   change: function(input,value,inputnumber){   
14     //input = the input textbox DOM element
15     //value = the value entered by user (or removed)
16     //inputnumber = the position of the input box (in touch mode we only have 1 big input box, so always 1 is returned here)
17   },
19   // callback when all inputs are filled in (keyup event)
20   complete : function(value, e, errorElement){
21     // value = the entered code
22     // e = last keyup event
23     // errorElement = error span next to to this, fill with html
24     // e.g. : $(errorElement).html("Code not correct");
25   }
27 });


v3.0.1 (2021-01-11)

  • Fixes component didn’t display properly inside a bootstrap modal.

v3.0.0 (2021-01-04)

  • Allow paste from keyboard
  • Removed workaround for ‘jumpy’ input boxes after pincode was complete
  • This change applies for mobile devices only.
  • This change required removing some class ‘form-control’ specific styling like the outline and bordes when focussed.
  • Removed Bower support
  • Pincode value is automatically removed if mobile device ‘focus’ the component again
  • The ‘complete’ callback is fired a bit later (100ms) for mobile devices only


  • Allow paste from keyboard

v2.3.0 (2020-09-26)

  • Fixes issue with input elements width in Firefox

v2.2.0 (2020-06-04)

  • Added detection iPad Pro as a touchscreen device
  • Place digits more precisely in the middle of fake boxes

v2.1.0 (2020-04-14)

v2.0.1 (2020-02-07)

  • Fixed After entering the last digit on a touch device, there are visual issues


v1.7.0 (2019-07-09)

  • fix bug: default pattern is not used
  • fix bug: inputtype tel does not prevent alphabet on PCs
  • fix css: to look better on Android systems
  • enlarge max supported digits from 6 to 9
  • minor code styling fixes

v1.6.1 (2019-03-04)

  • Fixed default value not showing on mobile devices (when hidedigits=false)
  • Fixed styling issues on mobile devices

v1.6.0 (2019-02-21)

  • Fixed No number pad when hidedigits is true on mobile


  • fixing indent to tabs


  • Attempt differentiating keys by name, not code


  • Update bootstrap-pincode-input.js


  • Digits only PIN implementation


  • Added new feature: change event for each input


  • CSS fix
  • re-added auto next text box


  • Fixed: Focus to previous textbox when press 0


  • Mobile support improved