It would be quite interesting if you provide an option to enter numbers using an on-screen number pad in your website. Since most of the new mobile devices doesn't come with a separate number pad, it is difficult to enter numbers fast. So providing an on-screen number pad would be a good alternative.
Here I have described a simple on-screen number pad developed using CSS, HTML and JavaScript.
Description
The number pad described here consist of twelve buttons. Ten of them represents each digit and the last two represents backspace and clear. They are arranged as seen in a typical number pad. A screen shot of the on-screen number pad is shown below.
Functions
To implement the on-screen number pad, three JavaScript functions are used. Each of them are described below. All the digits entered using the key pad is displayed in a textbox with id 'number'.
number_write(x)
This function is called every time a button representing a number is clicked. The argument 'x' denotes the number pressed. This function appends the number to the textbox.
number_clear()
This function clears all the data in the textbox. This function is called when the 'Clr' button on the number pad is clicked.
number_c()
This function deletes the last digit entered. It is similar to the backspace button in the keyboard. This function is called whenever the 'C' button on the on-screen keyboard is clicked.
Code
The complete code (CSS + HTML + JavaScript) is given below. It can be copied to a text editor and saved with '.html' file extension and opened using a web browser to see the results.
<html>
<head>
<title>On Screen Number Pad Using JavaScript</title>
<script type="text/javascript">
function number_write(x)
{
var text_box = document.getElementById("number");
if(x>=0 && x<=9)
{
if(isNaN(text_box.value))
text_box.value = 0;
text_box.value = (text_box.value * 10)+x;
}
}
function number_clear()
{
document.getElementById("number").value = 0;
}
function number_c()
{
var text_box = document.getElementById("number");
var num = text_box.value;
var num1 = num%10;
num -= num1;
num /= 10;
text_box.value = num;
}
</script>
<style type="text/css">
.main_panel
{
width:270px;
height:470px;
background-color:#999999;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
padding:20px;
}
.number_button
{
width:70px;
height:70px;
margin:10px;
float:left;
background-color:#FFFF99;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
font-size:36px;
text-align:center;
}
.number_button:hover
{
background-color:#66FF66;
}
.text_box
{
width:250px;
height:30px;
font-size:24px;
text-align:right;
}
</style>
</head>
<body>
<div class="main_panel">
<br />
<center><input class="text_box" type="text" id="number" name="num" /></center>
<br /><br />
<div class="number_button" onclick="number_write(1);">1</div>
<div class="number_button" onclick="number_write(2);">2</div>
<div class="number_button" onclick="number_write(3);">3</div>
<div class="number_button" onclick="number_write(4);">4</div>
<div class="number_button" onclick="number_write(5);">5</div>
<div class="number_button" onclick="number_write(6);">6</div>
<div class="number_button" onclick="number_write(7);">7</div>
<div class="number_button" onclick="number_write(8);">8</div>
<div class="number_button" onclick="number_write(9);">9</div>
<div class="number_button" onclick="number_clear();">Clr</div>
<div class="number_button" onclick="number_write(0);">0</div>
<div class="number_button" onclick="number_c();">C</div>
</div>
</body>
</html>
Here I have described a simple on-screen number pad developed using CSS, HTML and JavaScript.
Description
The number pad described here consist of twelve buttons. Ten of them represents each digit and the last two represents backspace and clear. They are arranged as seen in a typical number pad. A screen shot of the on-screen number pad is shown below.
Functions
To implement the on-screen number pad, three JavaScript functions are used. Each of them are described below. All the digits entered using the key pad is displayed in a textbox with id 'number'.
number_write(x)
This function is called every time a button representing a number is clicked. The argument 'x' denotes the number pressed. This function appends the number to the textbox.
number_clear()
This function clears all the data in the textbox. This function is called when the 'Clr' button on the number pad is clicked.
number_c()
This function deletes the last digit entered. It is similar to the backspace button in the keyboard. This function is called whenever the 'C' button on the on-screen keyboard is clicked.
Code
The complete code (CSS + HTML + JavaScript) is given below. It can be copied to a text editor and saved with '.html' file extension and opened using a web browser to see the results.
<html>
<head>
<title>On Screen Number Pad Using JavaScript</title>
<script type="text/javascript">
function number_write(x)
{
var text_box = document.getElementById("number");
if(x>=0 && x<=9)
{
if(isNaN(text_box.value))
text_box.value = 0;
text_box.value = (text_box.value * 10)+x;
}
}
function number_clear()
{
document.getElementById("number").value = 0;
}
function number_c()
{
var text_box = document.getElementById("number");
var num = text_box.value;
var num1 = num%10;
num -= num1;
num /= 10;
text_box.value = num;
}
</script>
<style type="text/css">
.main_panel
{
width:270px;
height:470px;
background-color:#999999;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
padding:20px;
}
.number_button
{
width:70px;
height:70px;
margin:10px;
float:left;
background-color:#FFFF99;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
font-size:36px;
text-align:center;
}
.number_button:hover
{
background-color:#66FF66;
}
.text_box
{
width:250px;
height:30px;
font-size:24px;
text-align:right;
}
</style>
</head>
<body>
<div class="main_panel">
<br />
<center><input class="text_box" type="text" id="number" name="num" /></center>
<br /><br />
<div class="number_button" onclick="number_write(1);">1</div>
<div class="number_button" onclick="number_write(2);">2</div>
<div class="number_button" onclick="number_write(3);">3</div>
<div class="number_button" onclick="number_write(4);">4</div>
<div class="number_button" onclick="number_write(5);">5</div>
<div class="number_button" onclick="number_write(6);">6</div>
<div class="number_button" onclick="number_write(7);">7</div>
<div class="number_button" onclick="number_write(8);">8</div>
<div class="number_button" onclick="number_write(9);">9</div>
<div class="number_button" onclick="number_clear();">Clr</div>
<div class="number_button" onclick="number_write(0);">0</div>
<div class="number_button" onclick="number_c();">C</div>
</div>
</body>
</html>
Thanks alot for this! I copied and pasted the code in this project I'm working on, styled it and it worked perfect...thanks again!
ReplyDeleteThank you for your interest. You may also try curiositybeyondcontrol.blogspot.com for more interesting topics.
Deletethanks i used this for my project and it working fine
ReplyDeletethis is great, it is exactly what I was looking for.
ReplyDeleteA small question, do you think it's possible to add a toggle button and a second num field ?
Yes, It would be possible to add toggle button and a second num field. Please feel free to contact me if you require help.
DeleteThis comment has been removed by the author.
DeleteI'm ready to help, but I do prefer to keep our discussions here.
Deleteok no problem at all, I'm just not a javascript coder, and no nothing about it, what I would need is another button lets say "discount" that would focus on another text field where I can use the num pad you did to enter a value.
DeleteSo that gives a num pad with 2 text field ! :)
Just try this:
Deletehttps://gist.github.com/anonymous/2083dafe1cd2a615593e
sorry for the late reply, works great thanks a lot !
DeleteWas playing around with this and it is great however I cant lead with a zero for some reason why is that?
ReplyDeleteIt's not possible to lead with a zero here. Please take a look at the "number_write" function which is executed each time a number key is pressed. It multiplies the number already entered with 10 and then adds the key pressed. This new number is displayed on the screen.
DeleteHi Vivek
DeleteNice code! Is there not possible to get it to lead with a zero? Is their any way possible the get around the problem so it can accept 0 in the lead?
hello vivek,
ReplyDeleteI am planning on using the keypad to enter 4 digit access code
and compare it to a pre-stored value. Is it possible to store the
keypress in a variable ?
Thanks for your nice work here.
Hello Cyril - Yes, it is possible to store the value in a variable. You can fetch the value in the input box and assign it to a variable.
Deletevar key_press = document.getElementById("number").value;
Vivek,
ReplyDeleteThank you for the quick help. This is my first attempt at javascript. I'll try it and let you know.
Vivek,
ReplyDeleteI was able to implement your suggestion, works great. I modified the code as below
function number_disp()
{
var password=1234;
var key_press = document.getElementById("number").value;
if (key_press == password)
{
//document.write(key_press);
location = "rkp.php"
}
else {
alert("Wrong Password")
}
and added this line in the keypad display section
class="number_button" onclick="number_disp();">Go
One more request, how can I mask the key press, I don't want it to show up the number pressed, instead it should display * for every key pressed. but my variable will have the actual key numbers.
Thanks for you help.
Vivek,
DeleteYes it worked. I was able to get the keypress into a variable, and compare it later.
I had a new question which is,how can I mask the key press, I don't want it to show up the number pressed, instead it should display * for every key pressed. but my variable will have the actual key numbers.
Hi,
DeleteTake a look at this code. Hope this is what you are looking for.
https://gist.github.com/anonymous/7956779
Warning: As far as security is concerned, this code has no value. Any one could just view the html source and find the access code. To make a secure access control system, you need to use some server side scripting language.
Hello Vivek,
DeleteThanks for the link and the advise on the security. I was looking for something similar.
Sorry for the delay in responding.
Hello Vivek,
ReplyDeleteHow can I add a button with a . to be able to type for example 1.23 ?
This is great. Going to save me a lot of time making one.
ReplyDeleteI'm going to be trying to fix this so it can be navigated with tab and arrow keys to decrease dependence on a touchpad on a project. If you have any advice, I'm glad to read it.
Thank you for sharing this.
Hi Vivek,
ReplyDeleteI have had the need to add an extra button with the 'dot' because the application I am working with, needs to enter decimal numbers with and without leading zero.
Because I saw that someone already asked you this question I want to ask you if you already have made this changes in an updated script.
Thank you
Regards
Franco
Thanks, I used your code to build a simple yet functional numeric keyboard - that saved me a lot of time! Thanks a lot)
ReplyDeleteFantastic code in creating the numpad!!! Save me a lot of time. Really appreciate your sharing
ReplyDelete