onKeyDownで数値チェック

このQ&Aのポイント
  • 入力時にタブで飛んだ時にチェックをかけるので関数として設定しておき、フォームではonKeyDownで呼び出すことが前提です。(onBlueは不可)
  • アルファベットの上に並んでいる数値での入力チェックはうまくいくのですが、テンキーの数字キー、タブキー、バックスペースキーも有効としたい。
  • 下記の例にこだわる必要はないが、onKeyDownで呼び出すことが条件。
回答を見る
  • ベストアンサー

onKeyDownで数値チェック

数値の入力チェックを行っています。 入力時にタブで飛んだ時にチェックをかけるので関数として設定しておき、フォームではonKeyDownで呼び出すことが前提です。(onBlueは不可) この時下記のプログラムでは、アルファベットの上に並んでいる数値での入力チェックはうまくいくのですが、以下の(1)~(3)で制限があるようで、思ったように動きません。 どなたかいいお知恵がある方は是非お願いいたします。 ********************** アルファベットの上に並んでいる数値のみ有効としているが、 (1)テンキーの数字キー (2)タブキー (3)バックスペースキー も有効としたい。 下記の例にこだわる必要はないが、 onKeyDownで呼び出すことが条件。 <script Language="JavaScript"><!-- function checkNum() { c = String.fromCharCode(event.keyCode); if ("0123456789".indexOf(c,0) < 0) alert("数値以外入力できません"); } // --></script> </head> <body> <form> <input type="text" onKeyDown="checkNum()"> </form> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • coral0
  • ベストアンサー率92% (13/14)
回答No.1

JavaScriptのString.fromCharCodeは、はっきり言って信用しない方が良いですよ^^; 取得してみると判りますが、テンキーのキーコード等を変換すると文字化けしてしまいます。 ですから、判定文を文字列判定からキーコード判定に変えて上げると上手く行きますよ^^ 例えば、テンキーでの"0"は、キーコード96ですが、メインキーでの"0"は、キーコード48です。 ここの辺りがキーコードを使う上で難しいところではありますが、明示的に判断が行えると思います。 以下の例では、0~9やENTER、TAB、BACKSPACEを全てキーコードで判断しています。 参考にして見てください^^ --------------------------------------- function checkNum() { var code = event.keyCode; if( code >= 96 && code <= 105 || // テンキー0~9チェック code >= 48 && code <= 57 || // メインキー0~9チェック code == 13 || // ENTERキーチェック code == 9 || // TABチェック code == 8 ) { // BACKSPACEチェック }else { alert("数字以外入力できません"); } } ---------------------------------------

sos000
質問者

お礼

思うような動きになりました!!! 昨日に引き続き今日も助けていただきありがとうございました!

関連するQ&A

  • 数値以外の入力をさせないようにした後・・・

    いつもお世話になっています。 ****************************************************************** <htm> <head> <script language=javascript> <!-- function checkNum() { c=String.fromCharCode(event.keyCode); if("0123456789".indexOf(c,0)<0)return false; return true; } //--> </script> </head> <body> <form> <input type="text" onKeyDown="return checkNum()"> <input type="submit"> </form> </body> </htm> ****************************************************************** 以上のソースでテキストボックス内に数値以外入力できないようにしました。 が、こうすると入力した値を消そうとしてもBackSpace・Deleteキーが使えないのです。 どうしたら入力制限をかけつつ、両キーを有効にできるのでしょうか。

  • テキストフィールドに半角数値以外入力させない方法…。

    お世話になります! JavaScriptで、 function checkNum() {  c = String.fromCharCode(event.keyCode);  if ("0123456789".indexOf(c,0) < 0) alert("数値以外入力できません"); } と記述し、実行してみたのですが確かに数値以外は入力できないのですが BackSpaceやEnterキー、Tabキーを押した時にもアラートが発生します…。 本を見て、 function checkNum() {  c = String.fromCharCode(event.keyCode);  if ("0123456789".indexOf(c,0) < 0) return false; return true; } と記述すると、フォーム自体に半角数字しか入力できなくなると書いてあったのですが 実行しても普通に全角入力できました…。(泣) 何か方法ありますか?ご存知の方、宜しくご教授願います★ ちなみに、勿論<input>部分にonKeyDown="***()"の記述はしてますし JavaScriptが有効な状態での実行です。

  • テキストフィールドの入力規則(数値チェック)

    http://oshiete1.goo.ne.jp/kotaeru.php3?q=143226 を参考にさせていただいて、以下のコードで実行してみました。 =============================== <BODY> <FORM NAME="f" ACTION="UPDATE" METHOD="POST" TARGET="FRAME_D" onSubmit="return conf();"> <INPUT TYPE="TEXT" NAME="FM_KINGAKU" onKeyDown="return keyCheck(event.keyCode);" > <SCRIPT TYPE="text/javascript" SRC="./JS.SOURCE"></SCRIPT> <SCRIPT TYPE="text/javascript"> <!-- function keyCheck(keyCodes){ if((keyCodes >= 49 && keyCodes <= 57) || (keyCodes >= 96 && keyCodes <= 105) || keyCodes == 46 || keyCodes == 8) return true; else return false; } function conf(WK_LINEINDEX){ /* 省略 */ } // --> </SCRIPT> </FORM> </BODY> =============================== しかし、数値以外のキーを押しても何事もなかったかのように 入力できてしまうのです。 前の質問者のlovelypoohさんは解決されたみたいなんですが、 いったい何が違うのでしょう? onSubmit="return conf();" ってのと onKeyDown="return keyCheck(event.keyCode);" ってのが 同じFORMタグの中にある、とか関係あるのでしょうか?

  • HTMLのtextで半角数字のみ入力OKにする方法

    お世話になります。 Windows、VisualStudio2015のASP.NET(VisualBasic)、.NET Framework4.6、 ローカルIIS、ブラウザはGoogleChrome、IE、で開発しています。 1つのページに1つのtext(ASP.NETではTextBox、名称はtxtTest)を置き、 半角数字のみ入力できるように、function(名称はnumOnly())を設定します。 HTMLのソースは以下の通りです。 functionは、<head><script></script></head> に書いてあります。 -------------------- ・・・ <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script> <!-- // 半角数値のみを入力可能にする function numOnly() { m = String.fromCharCode(event.keyCode); if("0123456789\b\r".indexOf(m, 0) < 0) return false; return true; } //--> </script> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txtTest" runat="server"></asp:TextBox>・・・※A </div> </form> </body> </html> -------------------- また、プログラムにおいては、 ページをロードする際に、 次のコードを実行します。 ASP.NETのTextBoxには、onkeydown属性がないからです。 ページ実行時に属性を追加します。 -------------------- Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load txtTest.Attributes.Add("onkeydown", "return numOnly()") End Sub -------------------- また、ブラウザで実行しますと、上記の※Aの部分のソースは、 以下のようになります。 -------------------- <input name="txtTest" type="text" id="txtTest" onkeydown="return numOnly()" /> -------------------- これにより、パソコンのキーボードの上の方に横に並んでいる数字キーで、 半角数字のみ入力はできるようになったのですが、 テンキーでの半角数字入力ができません。 これをできるようにしたいのですが、 何か適切な方法がございましたら、 ご教示いただけたら幸いです。 どうそよろしくお願いします。 (functionの参照元) http://javascript.eweb-design.com/1205_no.html <SCRIPT>という(大文字)はASP.NETでは適切でないようで、小文字に。 「language="JAVASCRIPT"」の個所もエラーになるため外してあります。

  • 半角英数字の判別

    お世話になります テキストフィールドにおいて半角英数字のチェックをしたいのですが・・・ 例えば『012ab』のような場合、 <script Language="JavaScript"> <!-- function checkText() { txt = document.myFORM.moto.value; if (txt.match(/[^a-z|^A-Z]/g)) alert("アルファベット以外が含まれてます"); } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkText()"> </form> では数字が入力されてるとalertされます function checkNum() { txt = document.myFORM.moto.value; for (i=0; i<txt.length; i++) { c = txt.charAt(i); if ("0123456789".indexOf(c,0) < 0) { alert("数値以外が含まれてます"); return; } } } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkNum()"> </form> ではアルファベットがあるとalertされてしまいます この2つをどのように組み合わせれば半角英数字以外であればalertされるようになるのでしょうか?

  • テキストボックスをEnterキーで移動する際のビープ音

    あるテキストボックスでEnterキーを押すと、次のテキストボックスに移動する スクリプトを組んだのですが、動作はしますが必ず「ブー」というビープ音が 鳴ってしまいます。 たぶん、改行できないテキストボックス内でEnterキーを押すことで、「ダメだよー」 っという警告だと思うのですが、どうにかして消すことはできないのでしょうか? どのような些細なことでも構いませんので、ご教授願います! ~Java Script~ function Change(){ if(event.keyCode==13) document.form.name2.focus(); } ~HTML~ <FORM NAME="form"> <INPUT TYPE="text" NAME="name1" onKeyDown="Change()"> <INPUT TYPE="text" NAME="name2"> </FORM>

  • 他のFormの入力内容により、Selectの状態を変化させたい

    Formの状態を他のFormの入力によって変化させたいのですが。 イメージ的には <Script language="Javasript"> function data1() {   document.forms[1].elements[0].value=document.test.i.value; } function data2() {   document.forms[2].elements[0].options[document.test.i.value].selected=ture; } </script> 入力<br> <form name="test"> <input type="text" name="i" onKeyDown="javascript:if(event.keyCode==9){ data1();data2(); }" > </form><br><br> テキスト<br> <form> <input type="text"> </form><br><br> セレクト<br> <form> <select> <option>0 <option>1 <option>2 <option>3 </select> </form><br><br> こんな感じです。 これで、タブキーを押せば、「入力」Formに入力された内容が、関数data1()によって「テキスト」Formにも表示されます。 これと同じように、「入力」Formに入力された内容で、「セレクト」Formを変化させたいと思いますが、data2()エラーになり上手く動作しません。 「入力」Formに1を入力すれば、「セレクト」Formの1が選択された状態になる… と言った事をしたいのですが、どうすればいいでしょうか?

  • インラインフレームのキーイベント

    IE7のインラインフレームでキーイベントを取得しようとしているのですが、オブジェクトがありませんとエラーになってしまいます。 こちら通常の場合は上手くいくのですが、 <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>HTML Editor</title> <script type="text/javascript"> document.onkeydown = function(e) { var shift, ctrl; keycode = event.keyCode; ctrl = event.ctrlKey; shift = event.shiftKey; // キーコードの文字を取得 keychar = String.fromCharCode(keycode).toUpperCase(); // Ctrl同時押しの場合 if (ctrl) { if (keychar == "C") { alert('Ctrl+C'); } } } </script> </head> <body id="oBody"> <span id="editSpan"> <iframe id="oIframe" style="width:100%;height:50%"> </iframe> </span> </body> </html> 次のようにインラインフレームの中で行おうとするとエラーになってしまいます。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>HTML Editor</title> </head> <body id="oBody"> <span id="editSpan"> <iframe id="oIframe" style="width:100%;height:50%"> </iframe> </span> <script type="text/javascript"> oIframe.document.onkeydown = function(e) { var shift, ctrl; keycode = event.keyCode; ctrl = event.ctrlKey; shift = event.shiftKey; // キーコードの文字を取得 keychar = String.fromCharCode(keycode).toUpperCase(); // Ctrl同時押しの場合 if (ctrl) { if (keychar == "C") { alert('Ctrl+C'); } } } </script> </body> </html> なにか解決方法ありますでしょうか。 よろしくお願いします。

  • checkbox の入力チェックのやり方について

    お世話になります。 フォームにて、 javascriptで、入力チェックをおこないたいと思っています。 チェックボックスについては、どれか選択が一つでもなければ、アラートで、文字を出したいと思いますが、うまくできません。 チェックボックスの入力確認の方法を教えてください。 よろしくお願いいたします。 現在作りかけのソースは、下記の通りです。 <html> <head><title>-</title></head> <body> <form method="post" action="" onsubmit="return form_Validator(this)"> <input type="text" name="a1" size="15" maxlength="12"> <BR> <input type="checkbox" name="a1001" value="1"> <input type="checkbox" name="a1002" value="1"> <input type="submit" value="登録" name="submit"> </form> <script Language="JavaScript"> <!-- function form_Validator(doc) { if ( doc.a1.value == "" ) { alert( "BAD" ); return false; } /* a1001かa1002のチェックボックスのチェックがなければアラート----*/ return (true); } //--> </script> </body> </html>

  • returnの戻り値について

    以前の質問を見ていてひとつわからないことがあるのです。 内容をそのままコピーしたのですが、この場合、キーが押されたときに関数を呼び出し、 returnで戻り値が「true/false」とありますが、戻ってきたときはどこにtrue/falseが入っているのですか? <BODY> <FORM NAME="f" ACTION="UPDATE" METHOD="POST" TARGET="FRAME_D" onSubmit="return conf();"> <INPUT TYPE="TEXT" NAME="FM_KINGAKU" onKeyDown="return keyCheck(event.keyCode);" > <SCRIPT TYPE="text/javascript" SRC="./JS.SOURCE"></SCRIPT> <SCRIPT TYPE="text/javascript"> <!-- function keyCheck(keyCodes){ if((keyCodes >= 49 && keyCodes <= 57) || (keyCodes >= 96 && keyCodes <= 105) || keyCodes == 46 || keyCodes == 8) return true; else return false; } // --> </SCRIPT> </FORM> </BODY>

専門家に質問してみよう