JavaScript tutorial- accept only number keys


Calculator: accept only number keys

Now your JavaScript calculator seems to work well. However, when a user inputs characters (by pressing keyword) that are not number characters(from 0 to 9), the calculator still accepts those characters. This will lead to an error when the user clicks the buttonresult button to make calculations.

To solve this problem, you need a piece of JavaScript code that applies to the onkeypress event of the text box:

function check(e){
var code=e.keyCode? e.keyCode:e.charCode;
if((code>=48 && code<=57)|| code==8) return true;
else return false;
}

This function needs to be applied to the event onkeypress of the text box:

<input type="text" name="txtvalue" maxlength="10" style="width: 164px" onkeypress="return check(event)"></td>

In this phase the JavaScript calculator code should be:

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>A simple calculator</title>
<script type="text/javascript" language="JavaScript">
var sign;
var val1;
var val2;
function get0(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="0";
}
function get1(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="1";
}
function get2(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="2";
}
function get3(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="3";
}
function get4(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="4";
}
function get5(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="5";
}
function get6(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="6";
}
function get7(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="7";
}
function get8(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="8";
}
function get9(){
if(document.forms[0].txtvalue.value.length<=10)
document.forms[0].txtvalue.value+="9";
}

function add(){
sign="+";
val1=document.forms[0].txtvalue.value;
document.getElementById("display").innerHTML =val1+"+";
document.forms[0].txtvalue.value="";



}
function subtract(){
sign="-";
val1=document.forms[0].txtvalue.value;
document.getElementById("display").innerHTML =val1+"-";

document.forms[0].txtvalue.value="";

}

function multiply(){
sign="*";
val1=document.forms[0].txtvalue.value;
document.getElementById("display").innerHTML =val1+"*";
document.forms[0].txtvalue.value="";

}

function divide(){
sign="/";
val1=document.forms[0].txtvalue.value;
document.getElementById("display").innerHTML =val1+"/";
document.forms[0].txtvalue.value="";

}

function result(){
var res;
val2=document.forms[0].txtvalue.value;
if(sign=="+") res=parseInt(val1)+parseInt(val2);
else if(sign=="-") res=parseInt(val1)-parseInt(val2);
else if(sign=="*") res=parseInt(val1)*parseInt(val2);
else res=parseInt(val1)/parseInt(val2);
if(!isNaN(res))
document.forms[0].txtvalue.value=res;


}

function cleartext(){
document.forms[0].txtvalue.value="";
val1="";
val2="";
res="";
document.getElementById("display").innerHTML="";
}

function check(e){
var code=e.keyCode? e.keyCode:e.charCode;
if((code>=48 && code<=57)|| code==8) return true;
else return false;
}




</script>
</head>
<body>
<form action="#">
<table style="border: 2; background-color: silver;">
<tr>
<td colspan="6">
<div id="display"></div>
<input type="text" name="txtvalue" maxlength="10" style="width: 164px" onkeypress="return check(event)"></td>
</tr>
<tr >
<td><input type="button" name="button0" value="0" onclick="get0()"></td>
<td><input type="button" name="button1" value="1" onclick="get1()"></td>
<td><input type="button" name="button2" value="2" onclick="get2()"></td>
<td><input type="button" name="button3" value="3" onclick="get3()"></td>
<td><input type="button" name="button4" value="4" onclick="get4()"></td>
<td><input type="button" name="buttonadd" value="+" onclick="add()"></td>
<td><input type="button" name="buttonsubtract" value="-" onclick="subtract()"></td>
<td style="width: 6px"><input type="button" name="buttonresult" value="=" onclick="result()"></td>


</tr>
<tr>

<td ><input type="button" name="button5" value="5" onclick="get5()"></td>
<td><input type="button" name="button6" value="6" onclick="get6()"></td>
<td><input type="button" name="button7" value="7" onclick="get7()"></td>
<td><input type="button" name="button8" value="8" onclick="get8()"></td>
<td><input type="button" name="button9" value="9" onclick="get9()"></td>
<td><input type="button" name="buttonmultiply" value="*" onclick="multiply()" ></td>
<td><input type="button" name="buttondivide" value="/" onclick="divide()" ></td>
<td style="width: 6px"><input type="button" name="buttonclear" value="C" onclick="cleartext()"></td>


</tr>
</table>

</form>

</body>
</html>




Comments




This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.