テキストで数値のみの入力制限をして、且つ、合計値を自動計算するJavascript(その1)

Javascript

よく、使うのでうp

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta content="text/html; charset=Shift_JIS" http-equiv="Content-Type">
<meta http-equiv=\"Content-Script-Type\" content=\"text/javascript\">
<title>自動計算</title>
<script language="JavaScript" type="text/javascript">
<!--
function sum(){
	var listpage = document.forms ['listPageForm'] ;
	var value1 = parseFloat (listpage.elements ['sample_before'].value) ;
	var value2 = parseFloat (listpage.elements ['sample_after'].value) ;
	var sample_sum = value1 + value2;
	listpage.elements ['sample_sum'].value = sample_sum.toString ();
}
//-->
</script>
<form name="listPageForm">
<table>
<tr>
<td>Sample1 : </td><td><input type="text" 
style= "text-align: right; ime-mode:disabled " name="sample_before" value="0" 
onkeyup="sum();" 
onkeypress='if(event.keyCode<"0".charCodeAt(0) || 
"9".charCodeAt(0)<event.keyCode) return false;'></td>
</tr>
<tr>
<td>Sample2 : </td><td><input type="text" 
style= "text-align: right; ime-mode:disabled " name="sample_after" value="0"
onkeyup="sum();" 
onkeypress='if(event.keyCode<"0".charCodeAt(0) || 
"9".charCodeAt(0)<event.keyCode) return false;'></td>
</tr>
<tr>
<td>Sum : </td>
<td><input type="text" 
style= "text-align: right; ime-mode:disabled " name="sample_sum" value="0" 
readonly="readonly"></td>
</tr>
</table>
</form>
</body>
</html>

※ ペーストした時の制御はしていないので、別処理が必要になります。