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

By 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.

File Size: 55.3 KB
Views Total: 22796
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

Features:

  • 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.

view source
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.

view source
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.

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

4. Initialize the plugin.

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

5. Plugin’s default options.

view source
01 $('#demo').pincodeInput({
02  
03   // 4 input boxes = code of 4 digits long
04   inputs:4,       
05  
06   // hide digits like password input            
07   hideDigits:true,  
08  
09   // keyDown callback            
10   keydown : function(e){},
11  
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   },
18  
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   }
26    
27 });

Changelog:

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

2020-12-11

  • 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

2020-02-06

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

2018-05-08

  • fixing indent to tabs

2018-05-01

  • Attempt differentiating keys by name, not code

2018-01-19

  • Update bootstrap-pincode-input.js

2017-07-04

  • Digits only PIN implementation

2017-05-16

  • Added new feature: change event for each input

2016-09-12

  • CSS fix
  • re-added auto next text box

2016-09-04

  • Fixed: Focus to previous textbox when press 0

2016-01-19

  • Mobile support improved

 

Related posts: