javascript、大きなテンキーのサンプル
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>
« 携帯ショップの数は半減する | トップページ | 圧着ペンチと端子台で、苦手なハンダ付け作業を回避できる »
「PHP/javaScript」カテゴリの記事
- Php, permisson denied(覚書)(2013.09.02)
- javascript、大きなテンキーのサンプル(2013.08.03)
- PHP, MySqLのdatetimeデータ型の関連の型変換(2013.07.28)
- PHP,文字列と数値の覚書(2013.07.09)
- php、 is_integer()は数値か? is_numeric()は数値に変換可能か?(2013.07.06)
この記事へのコメントは終了しました。
コメント