Login With x Digit Pin Code - jQuery Pinlogin

Login With x Digit Pin Code - jQuery Pinlogin

jQuery Pinlogin is a simple and lightweight pincode plugin that enables login with pincode functionality on your web app similar to the Windows 10 and some Mobile apps.

Comes with complete and invalid callbacks that will be triggered when the pincode is filled and your user enters an invalid digit.

Only accepts Digital Pins (0-10) and you are able to specify the number of pincode fields to display.

The pincode moves to previous input with backspace or goes to next when filled in.

1. Include jQuery (slim build) and the jQuery Pinlogin plugin's files on the webpage.

<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<!-- include jQuery Pinlogin plugin -->
<script src="jquery.pinlogin.js"></script>
<link href="jquery.pinlogin.css" rel="stylesheet">

2. Create an empty container to holder the pincode input.

<div id="pinwrapper"></div>

3. Call the function on the container element.

$(function(){
  $('#pinwrapper').pinlogin();
});

4. Specify the maximum number of pincode fields you want to use.

$('#pinwrapper').pinlogin({
  fields : 6 // default 5
});

5. Specify the placeholder character that's displayed after entering a number in a field.

$('#pinwrapper').pinlogin({
  placeholder: '*' // default: '•'
});

6. Enable/disable the autofocus functionality on the pincode input.

$('#pinwrapper').pinlogin({
  autofocus : false // default: 'true'
});

7. Decide whether to hide the input digits and replace them with a placeholder.

$('#pinwrapper').pinlogin({
  hideinput : false, // default: 'true'
});

8. Do something when all fields are filled in.

$('#pinwrapper').pinlogin({
  complete : function(pin){
    // pin  : the entered pincode
  },
});

9. Do something when user enters an invalid value in a field.

$('#pinwrapper').pinlogin({
  invalid : function(field, nr){
    // field:   the jquery field object
    // nr : the field number
  }
});

10. Do something when user pressed a key down in a field.

$('#pinwrapper').pinlogin({
  keydown : function(e, field, nr){ 
    // e  : the event object
    // field:   the jquery field object
    // nr : the field number
  }
});

11. Do something when a value is entered in a field.

$('#pinwrapper').pinlogin({
  input : function(e, field, nr){
    // e  : the event object
    // field: the jquery field object
    // nr:  the field number
  }   
});

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

  • Publication date: 08.06.2018
  • Source