Custom Pin Code Input Plugin with jQuery and Bootstrap

Custom Pin Code Input Plugin with jQuery and Bootstrap
File Size: 29.8 KB
Views Total:
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.

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

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

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

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

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

4. Initialize the plugin.


5. Plugin's default options.


  // 4 input boxes = code of 4 digits long

  // hide digits like password input             

  // keyDown callback             
  keydown : function(e){},

  // callback on every input on change (keyup event)
  change: function(input,value,inputnumber){    
    //input = the input textbox DOM element
    //value = the value entered by user (or removed)
    //inputnumber = the position of the input box (in touch mode we only have 1 big input box, so always 1 is returned here)

  // callback when all inputs are filled in (keyup event)
  complete : function(value, e, errorElement){
    // value = the entered code
    // e = last keyup event
    // errorElement = error span next to to this, fill with html 
    // e.g. : $(errorElement).html("Code not correct");


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

This awesome jQuery plugin is developed by fkranenburg. For more Advanced Usages, please check the demo page or visit the official website.