Visual Numerical Keyboard Easy Numpad - Download Customizable Visual Numerical Keyboard Plugin - Easy Numpad

Download Customizable Visual Numerical Keyboard Plugin – Easy Numpad

By Posted on

This time I will share jQuery Plugin and tutorial about Customizable Visual Numerical Keyboard Plugin – Easy Numpad, hope it will help you in programming stack.

Visual Numerical Keyboard Easy Numpad - Download Customizable Visual Numerical Keyboard Plugin - Easy Numpad
File Size: 5.4 KB
Views Total: 8767
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

The Easy Numpad jQuery plugin lets you create a minimal, customizable visual numerical keyboard which allows users to type only numbers in your input field.

How to use it:

1. Insert the main JavaScript file easy-numpad.js after jQuery JavaScript library.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>
5 <script src="js/easy-numpad.js"></script>

2. Insert required styleshet easy-numpad.min.css into the head of your document.

view source
1 <link rel="stylesheet" href="css/easy-numpad.css">

3. Create an input field where you want to attach the Visual Numerical Keyboard to.

view source
1 <div class="easy-get">
2   <input type="text" class="easy-put" readonly="true">
3 </div>

4. Override the default CSS rules to create your own styles.

view source
01 .easy-get:hover { cursor: pointer; }
02  
03 .easy-numpad-frame {
04   position: fixed;
05   top: 0px;
06   left: 0px;
07   width: 100%;
08   height: 100%;
09   z-index: 999999;
10   display: flex;
11   display: -webkit-flex;
12   align-items: center;
13   -webkit-align-items: center;
14   justify-content: center;
15   -webkit-justify-content: center;
16   background-color: rgba(236,240,241,0.8);
17 }
18  
19 .easy-numpad-container {
20   position: relative;
21   width: 100%;
22   max-width: 300px;
23   -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
24   -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
25   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
26   padding: 10px;
27 }
28  
29 a#easy-numpad-close {
30   position: absolute;
31   right: -54px;
32   top: -56px;
33   background-color: #f44336;
34   color: #fff;
35   line-height: 1;
36   padding: 20px 21px;
37 }
38  
39 .easy-numpad-output-container {
40   position: relative;
41   width: 100%;
42 }
43  
44 .easy-numpad-output {
45   width: 100%;
46   border: 1px solid #666;
47   background-color: rgba(255, 255, 255, 0.8);
48   box-sizing: border-box;
49   margin: 0px;
50   text-align: center;
51   min-height: 60px;
52   display: flex;
53   display: -webkit-flex;
54   align-items: center;
55   -webkit-align-items: center;
56   justify-content: center;
57   -webkit-justify-content: center;
58   font-size: 24px;
59 }
60  
61 .easy-numpad-number-container > table {
62   width: calc(100% + 6px);
63   position: relative;
64   left: -3px;
65   margin-top: 10px;
66 }
67  
68 .easy-numpad-number-container > table a {
69   display: block;
70   padding: 16px 10px;
71   background-color: #424242;
72   color: #fff;
73   text-align: center;
74 }
75  
76 .easy-numpad-number-container > table a:hover { background-color: #616161; }
77  
78 .easy-numpad-number-container .cancel { background-color: #ef5350; }
79  
80 .easy-numpad-number-container .done { background-color: #388E3C; }
81  
82 @media only screen and (min-width : 300px) and (max-width : 767px) {
83  
84 a#easy-numpad-close { right: 0px }
85  
86 }

source : jquery.net

Related posts: