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.
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.
2 |
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin = "anonymous" > |
5 |
< script src = "js/easy-numpad.js" ></ script > |
2. Insert required styleshet easy-numpad.min.css
into the head
of your document.
1 |
< link rel = "stylesheet" href = "css/easy-numpad.css" > |
3. Create an input field where you want to attach the Visual Numerical Keyboard to.
2 |
< input type = "text" class = "easy-put" readonly = "true" > |
4. Override the default CSS rules to create your own styles.
01 |
.easy-get:hover { cursor : pointer ; } |
11 |
display : -webkit-flex; |
13 |
-webkit-align-items: center ; |
14 |
justify- content : center ; |
15 |
-webkit-justify- content : center ; |
16 |
background-color : rgba( 236 , 240 , 241 , 0.8 ); |
19 |
.easy-numpad-container { |
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 ); |
33 |
background-color : #f44336 ; |
39 |
.easy-numpad-output-container { |
46 |
border : 1px solid #666 ; |
47 |
background-color : rgba( 255 , 255 , 255 , 0.8 ); |
48 |
box-sizing: border-box; |
53 |
display : -webkit-flex; |
55 |
-webkit-align-items: center ; |
56 |
justify- content : center ; |
57 |
-webkit-justify- content : center ; |
61 |
.easy-numpad-number-container > table { |
62 |
width : calc( 100% + 6px ); |
68 |
.easy-numpad-number-container > table a { |
71 |
background-color : #424242 ; |
76 |
.easy-numpad-number-container > table a:hover { background-color : #616161 ; } |
78 |
.easy-numpad-number-container .cancel { background-color : #ef5350 ; } |
80 |
.easy-numpad-number-container .done { background-color : #388E3C ; } |
82 |
@media only screen and (min-width : 300px ) and (max-width : 767px ) { |
84 |
a#easy-numpad-close { right : 0px } |
source : jquery.net