javascript、大きなテンキーのサンプル: 赤須Muのブログ

Web画面に大きなテンキーを表示してみた。
最初、ダイアログかサブウインドウで表示しようとしたが、
safari、Firefox、chromeなどでは表示しないので、htmlに埋め込む形となった。

<?php
	header("Content-Type:text/html;charset=utf-8");

?>
<html>
<head>
	<style type="text/css">
input.example {
	font-size:	50pt;
	height:		120;
	width:		100%;
}

input.tenKey {
	font-size:	50pt;
	height:		100%;
	width:		100%;
}

td.td1{
	font-size:	50pt;
	align:		center;
	height:		120;
	width:		30%;
}
	</style>
	<script type="text/javascript"><!--

		var inputPlace = "";
		function onTenkey( num ){
			//alert( num );

			if( inputPlace == "" ){
				return;
			}
			//alert( num );
			var obj;
			if( num == "RET" ){
				if( inputPlace == "num" ){
					obj = document.getElementById( "pass" );
				} else if( inputPlace == "pass" ){
					obj = document.getElementById( "login" );
				} else {
					obj = document.getElementById( "num" );
				}
				obj.focus();
				return;
			}

			//alert( inputPlace);
			obj = document.getElementById( inputPlace );
			//alert( obj.value );
			if( num == "BS" ){
				var str = obj.value;
				if( str.length > 0 ){
					obj.value = str.substr( 0, str.length -1 );
				}
			} else {
				obj.value += num;
			} 

		}

		function onNum(){
			//alert( inputPlace );
			inputPlace = "num";
		}

		function onPass(){
			//alert( inputPlace );
			inputPlace = "pass";
		}
	// --></script>
</head>

<body>
<form method="post" action="./testBigkey.php">

<table align="center" width="100%">
	<tr>
		<td class="td1">番号：</td>
		<td class="td1"><input type="text" name="id" class="example" onFocus="onNum()" id="num"></td>
		<td></td>
	</tr>
	<tr>
		<td class="td1">暗証番号：　</td>
		<td class="td1"><input type="password" name="password" class="example" onFocus="onPass()" id="pass"></td>
		<td colspan="2" align="center" class="td1">
			<input type="submit" value="ログイン"  class="example"  id="login"> 
		</td>
	</tr>
</table>


</form>

<table width="100%">
	<tr>
		<td class="td1"> <input type="button" value="   1   " class="tenKey" onclick="onTenkey('1')"></td>
		<td class="td1"> <input type="button" value="   2   " class="tenKey" onclick="onTenkey('2')"></td>
		<td class="td1"> <input type="button" value="3" class="tenKey" onclick="onTenkey('3')"></td>
	</tr>
	<tr>
		<td class="td1"> <input type="button" value="4" class="tenKey" onclick="onTenkey('4')"></td>
		<td class="td1"> <input type="button" value="5" class="tenKey" onclick="onTenkey('5')"></td>
		<td class="td1"> <input type="button" value="6" class="tenKey" onclick="onTenkey('6')"></td>
	</tr>
	<tr>
		<td class="td1"> <input type="button" value="7" class="tenKey" onclick="onTenkey('7')"></td>
		<td class="td1"> <input type="button" value="8" class="tenKey" onclick="onTenkey('8')"></td>
		<td class="td1"> <input type="button" value="9" class="tenKey" onclick="onTenkey('9')"></td>
	</tr>
	<tr>
		<td class="td1"> <input type="button" value="BS" class="tenKey" onclick="onTenkey('BS')"></td>
		<td class="td1"> <input type="button" value="0" class="tenKey" onclick="onTenkey('0')"></td>
		<td class="td1"> <input type="button" value="入力" class="tenKey" onclick="onTenkey('RET')"></td>
	</tr>
</table>
</body>
</html>

赤須Muのブログ

ほぼ引退プログラマの自由で無為な日々

携帯URL

最近の記事

バックナンバー

2013年8月 3日 (土)

javascript、大きなテンキーのサンプル

「PHP/javaScript」カテゴリの記事

コメント

トラックバック