Press "Enter" to skip to content

Bootstrap jQuery Plugin for X-Digit Pincode Input Box

Bootstrap jQuery x-pin code input tool. You only need to enter the Bootstrap tag. Pincode Input is a plugin for jQuery that converts a plain text field into a Bootstrap-style PIN code entry as you have seen in a SIM PIN manager.

pincode input jquery, pincode input html, otp input field html css, 6 digit pin code validation in html, base pin code, pin code validation in html5


  • It automatically moves to the next slot.
  • Performs a call after all entries are filled out.
  • Supports an unlimited number of numbers.

How to make use of it:

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

Custom Pin Code Input Plugin, pin code input CSS, Bootstrap Pincode input Plugin/Github, otp input field html css

See Demo And Download

Official Website(fkranenburg): Click Here

This superior jQuery/javascript plugin is developed by fkranenburg. For extra Advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.