Minimal Keypad For Web & Mobile - PINpad

File Size: 3.42 KB
Views Total: 7020
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Keypad For Web & Mobile - PINpad

A tiny jQuery based virtual pin pad (also called numeric keypad) that can be useful in your credit card form to accept password strings or personal identification number.

How to use it:

1. Code the HTML for the virtual pin pad.

<div id="pinpad"> 
  <form >
    <input type="password" id="password" /></br>
    <input type="button" value="1" id="1" class="pinButton calc"/>
    <input type="button" value="2" id="2" class="pinButton calc"/>
    <input type="button" value="3" id="3" class="pinButton calc"/><br>
    <input type="button" value="4" id="4" class="pinButton calc"/>
    <input type="button" value="5" id="5" class="pinButton calc"/>
    <input type="button" value="6" id="6" class="pinButton calc"/><br>
    <input type="button" value="7" id="7" class="pinButton calc"/>
    <input type="button" value="8" id="8" class="pinButton calc"/>
    <input type="button" value="9" id="9" class="pinButton calc"/><br>
    <input type="button" value="clear" id="clear" class="pinButton clear"/>
    <input type="button" value="0" id="0 " class="pinButton calc"/>
    <input type="button" value="enter" id="enter" class="pinButton enter"/>
  </form>
</div>

2. The primary styles for the pin pad.

form {
  width: 390px;
  margin: 50px auto;
  background: #fff;
  padding: 35px 25px;
  text-align: center;
  box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

input[type="password"] {
  padding: 0 40px;
  border-radius: 5px;
  width: 350px;
  margin: auto;
  border: 1px solid rgb(228, 220, 220);
  outline: none;
  font-size: 60px;
  color: transparent;
  text-shadow: 0 0 0 rgb(71, 71, 71);
  text-align: center;
}

input:focus {
  outline: none;
}

.pinButton {
  border: none;
  background: none;
  font-size: 1.5em;
  border-radius: 50%;
  height: 60px;
  font-weight: 550;
  width: 60px;
  color: transparent;
  text-shadow: 0 0 0 rgb(102, 101, 101);
  margin: 7px 20px;
}

.clear,
.enter {
  font-size: 1em !important;
}

.pinButton:hover {
  box-shadow: #506ce8 0 0 1px 1px;
}
.pinButton:active {
  background: #506ce8;
  color: #fff;
}

.clear:hover {
  box-shadow: #ff3c41 0 0 1px 1px;
}

.clear:active {
  background: #ff3c41;
  color: #fff;
}

.enter:hover {
  box-shadow: #47cf73 0 0 1px 1px;
}

.enter:active {
  background: #47cf73;
  color: #fff;
}

3. Load the needed jQuery JavaScript library in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4. The JavaScript (jQuery script) to activate the pin pad.

$(document).ready(function () {

  const input_value = $("#password");

  //disable input from typing
  $("#password").keypress(function () {
    return false;
  });

  //add password
  $(".calc").click(function () {
    let value = $(this).val();
    field(value);
  });

  function field(value) {
    input_value.val(input_value.val() + value);
  }

  $("#clear").click(function () {
    input_value.val("");
  });

  $("#enter").click(function () {
    alert("Your password " + input_value.val() + " added");
  });
  
});

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