<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>jQuery Easy Numpad Plugin Demo</title>
<meta charset="UTF-8">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/easy-numpad.css">
<style>
.page-container {
text-align: center;
margin: 150px 0px 0px 0px;
}
.input-container {
position: relative;
max-width: 400px;
margin: auto;
background: linear-gradient(to bottom right, #3F51B5 , #7E57C2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
padding: 50px;
}
.input-container > input {
padding: 10px;
outline: none !important;
box-shadow: none !important;
text-align: center;
}
span.tap {
font-size: 22px;
}
</style>
</head>
<body><div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="https://www.jqueryscript.net/table/jQuery-Dynamic-Data-Grid-Plugin-appendGrid.html">Download This Plugin</a></li>
<li><a href="https://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="https://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="page-container">
<h1>jQuery Easy Numpad Plugin Demo</h1>
<div class="input-container easy-get">
<input type="text" class="easy-put" readonly="true"/>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="js/easy-numpad.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<form id="form1" runat="server">
<asp:TextBox ID="YourTextBox" runat="server" CssClass="number"></asp:TextBox>
</form>
<script type="text/javascript">
// Get your number elements
var numberElements = document.getElementsByClassName("number");
// Loop through each one
for (var i = 0; i < numberElements.length; i++) {
// Get your current element
numberElements[i].type = 'number';
}
</script>
<script type="text/javascript">
$(function(){
$('.number').each(function(){ $(this).attr('type','number'); });
});
</script>
<asp:TextBox ID="UsageInput" runat="server" CssClass="number" Font-Bold="True" Font-Names="Arial"
Font-Size="Medium" style="z-index: 1; left: 124px; top: 200px; position: absolute;
height: 15px; width: 112px" ></asp:TextBox>
</html>
body {
font-family: 'Roboto';
}
a {
text-decoration: none;
}
.easy-get:hover {
cursor: pointer;
}
.easy-numpad-frame {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 999999;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
background-color: rgba(236,240,241,0.8);
}
.easy-numpad-container {
position: relative;
width: 100%;
max-width: 300px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
padding: 10px;
}
a#easy-numpad-close {
position: absolute;
right: -54px;
top: -56px;
background-color: #f44336;
color: #fff;
line-height: 1;
padding: 20px 21px;
}
.easy-numpad-output-container {
position: relative;
width: 100%;
}
.easy-numpad-output {
width: 100%;
border: 1px solid #666;
background-color: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
margin: 0px;
text-align: center;
min-height: 60px;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;
font-size: 24px;
}
.easy-numpad-number-container > table {
width: calc(100% + 6px);
position: relative;
left: -3px;
margin-top: 10px;
}
.easy-numpad-number-container > table a {
display: block;
padding: 16px 10px;
background-color: #424242;
color: #fff;
text-align: center;
}
.easy-numpad-number-container > table a:hover {
background-color: #616161;
}
.easy-numpad-number-container .cancel {
background-color: #ef5350;
}
.easy-numpad-number-container .done {
background-color: #388E3C;
}
@media only screen and (min-width : 300px) and (max-width : 767px) {
a#easy-numpad-close {
right: 0px
}
}
$(document).ready(function () {
$('.easy-get').on('click', () => {
show_easy_numpad();
});
});
function show_easy_numpad() {
var easy_numpad = `
<div class="easy-numpad-frame" id="easy-numpad-frame">
<div class="easy-numpad-container">
<div class="easy-numpad-output-container">
<p class="easy-numpad-output" id="easy-numpad-output"></p>
</div>
<div class="easy-numpad-number-container">
<table>
<tr>
<td><a href="7" onclick="easynum()">7</a></td>
<td><a href="8" onclick="easynum()">8</a></td>
<td><a href="9" onclick="easynum()">9</a></td>
<td><a href="Del" class="del" id="del" onclick="easy_numpad_del()">Del</a></td>
</tr>
<tr>
<td><a href="4" onclick="easynum()">4</a></td>
<td><a href="5" onclick="easynum()">5</a></td>
<td><a href="6" onclick="easynum()">6</a></td>
<td><a href="Clear" class="clear" id="clear" onclick="easy_numpad_clear()">Clear</a></td>
</tr>
<tr>
<td><a href="1" onclick="easynum()">1</a></td>
<td><a href="2" onclick="easynum()">2</a></td>
<td><a href="3" onclick="easynum()">3</a></td>
<td><a href="Cancel" class="cancel" id="cancel" onclick="easy_numpad_cancel()">Cancel</a></td>
</tr>
<tr>
<td colspan="2" onclick="easynum()"><a href="0">0</a></td>
<td onclick="easynum()"><a href=".">.</a></td>
<td><a href="Done" class="done" id="done" onclick="easy_numpad_done()">Done</a></td>
</tr>
</table>
</div>
</div>
</div>
`;
$('body').append(easy_numpad);
}
function easy_numpad_close() {
$('#easy-numpad-frame').remove();
}
function easynum() {
event.preventDefault();
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
if (navigator.vibrate) {
navigator.vibrate(60);
}
var easy_num_button = $(event.target);
var easy_num_value = easy_num_button.text();
$('#easy-numpad-output').append(easy_num_value);
}
function easy_numpad_del() {
event.preventDefault();
var easy_numpad_output_val = $('#easy-numpad-output').text();
var easy_numpad_output_val_deleted = easy_numpad_output_val.slice(0, -1);
$('#easy-numpad-output').text(easy_numpad_output_val_deleted);
}
function easy_numpad_clear() {
event.preventDefault();
$('#easy-numpad-output').text("");
}
function easy_numpad_cancel() {
event.preventDefault();
$('#easy-numpad-frame').remove();
}
function easy_numpad_done() {
event.preventDefault();
var easy_numpad_output_val = $('#easy-numpad-output').text();
$('.easy-put').val(easy_numpad_output_val);
easy_numpad_close();
}
<script type="text/javascript">
// Get your number elements
var numberElements = document.getElementsByClassName("number");
// Loop through each one
for (var i = 0; i < numberElements.length; i++) {
// Get your current element
numberElements[i].type = 'number';
}
</script>
