Minimal Keypad For Web & Mobile - PINpad

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

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.