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.

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
   

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: