• ベストアンサー

入力チェックについて

今、Inputタグ内のデータに以下の条件があるため、その処理を考えています。 条件: 1.件数がマイナスと数字のみで入力される 2.件数は-999から999までの範囲以外の入力を受け付けない そこで、<INPUT type="text" maxlength="3" name="kensu" style="ime-mode:inactive">というテキストボックスを用意しました。 ここから、-999<=A<0の条件を考え、"-"キーが押された際のキーイベントでjavascriptを使い、maxlengthの値を変更できないかと考えました。 I.この方法は、まず無理なのでしょうか? Windowsアプリではプロパティの変更が可能だったので、できるのではないか?と情報を探してみましたが、webフォームでは、どうもできなさそうです。 II.キーイベントとして、INPUTタグの中にOnKeyDownを記述し、ネット上の例を参考にjavascriptで処理をしようと考えたのですが、"-"キーを取得してくれません。 document.フォーム名.onkeydown=e function mainuskey(e){ if(event.keyCord == 45) {window.alert('マイナスキーが押されました');} } どこがおかしいのかわかりません。このような記述についての参考URLがありましたらお教えいただけないでしょうか。 III.他の方法として、INPUTタグ内にOnBlurを記述し、フォーカスを失ってから、 内部の数値についての適合チェックを行うという方法も考えてみたのですが、 webフォームでこのような条件をチェックする際には、 通常、どのような方法を取るのがベターなのでしょうか? よろしくお願いします。

  • kenton
  • お礼率74% (110/148)

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

#2>この知識は、タグ辞典程度でも載っている常識なのでしょうか? タグ辞典には載っていないんじゃないでしょうか(私は知りませんけど) 大抵のアトリビュート(属性)には、それに該当するスクリプトでのプロパティがあります。 ただ、面倒なのは、大文字小文字が微妙に違っていたりして・ IE(を使っているみたいですね)なら http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp をさんこうにされるのがよろしいかと思います。 ただIEは、標準を逸脱していることも多々あるので注意が必要です。 (上記リファレンスにも、標準に準拠していない部分に付いては、注記があります。) 標準的な部分については(以下はDOM) http://www.doraneko.org/misc/dom10/19981001/level-one-html.html#ID-011100101 (上記は、翻訳サイト)など、W3C(下記)などを参照してください。 http://www.w3.org/TR/ #2>onsubmitの時点でのチェックが一般的なのですね。 一般的かどうかは知りません。 キーが1つ入力される毎にチェックするのは、面倒ですよと言っているだけです。(入力時にチェックされているサイト様もあると思います)

kenton
質問者

お礼

BLUEPIXYさん、再び、回答をつけていただきありがとうございます。 参考URL、ありがとうございます。 正直、英語は苦手なので翻訳サイトから読み始めてみます。 結構、奥が深いものなんですね。 javascriptを組んで、変数の名称のうち間違いや、大文字小文字のミスで動かないということが結構あります。(^^;) 注意が足りないと言われればそれまでですが、 もっと良いエディタが無いかと模索中です。 >一般的かどうかは知りません。 書き方が悪くすいません。 作ってみましたが、やはりキーチェックを毎回やることを考えるよりは、簡単ですね。 ありがとうございました。

その他の回答 (2)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

I. maxlength の値はスクリプトから変更可能です。 スクリプトからは、maxLength でアクセスします。 II. III. キーイベント毎のチェックは、できると思いますが結構面倒なので、 onsubmit イベントなんかでチェックするようにしてはどうでしょう。 v = parseFloat(….kensu.value);//あるいは、parseInt で値を得てから if(v <-999 || 999 < v) で簡単にチェックできますし・

kenton
質問者

お礼

BLUEPIXYさん、こちらでも回答ありがとうございます。 Iの件、できました。 この知識は、タグ辞典程度でも載っている常識なのでしょうか? 見つけられなかったので、できないものと諦めかけていました。 II、IIIの件もこちらの方法で実現できました。 onsubmitの時点でのチェックが一般的なのですね。 今まではWindowアプリが中心であったためか、 いろいろなフローが考えられる中で、 領域が変わると、意外と使う側の考え方も変わることに戸惑っています。 まぁ、職種や発注先が変わると・・・という風にも言えますが。 最良な手段を探すとなると難しいものですね。

回答No.1

ここにキーコードについて書いてあります。

参考URL:
http://oshiete1.goo.ne.jp/kotaeru.php3?q=143226
kenton
質問者

お礼

Programmerさん、ご回答ありがとうございます。 事前に探してみましたが、うまく探しきれていませんでした。 自分のやりたいことで、うまく検索用語を使わないとダメなんですね。 参考Page、大変助かりました。

関連するQ&A

  • 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>

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

    お世話になります! 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が有効な状態での実行です。

  • 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>

  • HTML テキストエリアの最大入力桁の指定法

    タイトルのとおりですが、調べても テキストエリアは行と幅の指定はできるのですが、 最大入力値の指定方法は書いていないのです。 テキストボックス <input type ="text" ~>なら、 maxlength属性を記述すればよいのはわかりました。 どのように<textarea>タグに記述すればよいのでしょうか?

  • 【validation.xml】長さの入力チェック

    いつもお世話になっております。 validation.xmlを使用しての長さ入力チェックについてご教授ください。 validation.xmlで、下記の指定をした場合、文字列の長さが100でチェックがかかりますが(半角でも全角でも)、 文字数ではなくバイトでチェックをかける方法はどのように記述すればよろしいでしょうか? <form name="TestForm">  <field property="freearea" depends="maxlength">   <arg0 key="フリーエリア" resource="false"/>   <arg1 key="${var:maxlength}" resource="false"/>   <var>    <var-name>maxlength</var-name>    <var-value>100</var-value>   </var>  </field> </form>

  • Firefox3 フォーム入力画面にて

    XP Firefox3 で フォーム入力画面とかで <input type=text 電話番号入力(ime-mode: inactive; maxlength=13) で半角数字とか半角スペースを入れ確認画面に進み前画面に戻ると � ←◆の白抜き?マーク � ←参照文字の様な のような文字が表示される場合があります・・・ そのまま何回か往復してみるとどんどん増えていきます。 � � � � � � � この現象は一体なんでしょうか?

  • メールフォームの入力チェックが動きません

    前任者が制作したメールフォームの入力チェックが動かないということで、 修正をしてみたのですが、思うように動いてくれません。 javascriptで作成されていて、 テキストフォームとプルダウンのチェックまでは未入力だと、 アラートが出てくるのですが、 最後の同意のチェックボックスの未チェックはスルーされてしまいます。 問題のjavascriptは下記になります。 ----------------------------------------------------------------- var mndFileds=new Array('Company','Last Name','Email','Phone','LEADCF3','Description'); var fldLangVal=new Array('会社名','お名前','メールアドレス','お電話番号','お問い合せ種別','お問い合せ内容'); function checkMandatery(){ for(i=0;i<mndFileds.length;i++){ var fieldObj=document.forms['name1'][mndFileds[i]]; if((fieldObj) && ((fieldObj.value).replace(/^\s+|\s+$/g, '')).length==0){ alert(fldLangVal[i] +' を入力してください。'); fieldObj.focus(); return false; }else if(fieldObj && (fieldObj.nodeName=='SELECT') && (fieldObj.options[fieldObj.selectedIndex].value=='-None-')){ alert(fldLangVal[i] +' を入力してください。'); fieldObj.focus(); return false; }else if(document.forms['name1'].acceptance.checked){ alert('にチェックをしてください。'); return false; } } } ----------------------------------------------------------------- メールフォームのhtmlは以下になります。 ----------------------------------------------------------------- <form action='' name='name1' method='POST' onSubmit='javascript:document.charset="UTF-8"; return checkMandatery()' accept-charset='UTF-8'> <p>会社名(必須):<input name='Company' type='text' size="30" maxlength='100'/></p> <p>お名前(必須):<input name='Last Name' type='text' size="30" maxlength='80' /></p> <p>メールアドレス(必須):<input name="Email"></p> <p>お電話番号(必須):<input name='Phone' type='text' size="30" maxlength='30' /></p> <p>Webサイト:<input name='Website' type='text' size="40" maxlength='120' value="http://" /></p> <p>お問い合せ種別(必須): <select name='LEADCF3'> <option value='-None-'>–なし–</option> <option value='種別1'>種別1</option> <option value='種別2'>種別2</option> <option value='種別3'>種別3</option> </select></p> <p>お問い合せ内容(必須):<textarea name='Description' cols="40" width='250' height='250'></textarea></p> <p><input type="checkbox" name="acceptance" value="1" class="wpcf7-acceptance" />同意する</p> <p><input type="image" src="btn_send_contact.jpg" alt="送信する" name='save' /> <input type="image" onClick="this.form.reset();return false" src="btn_reset_contact.jpg" alt="リセットする" name='reset' /></p> </form> ----------------------------------------------------------------- 私自身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タグの中にある、とか関係あるのでしょうか?

  • テキストボックスの文字の大きさを変更するには

    タグ打ちでWebページを作っています。 テキストボックスに関する質問です。 テキストボックス本体の大きさは下のように記述すれば指定できることはわかっているのですが、 <input type="text" size=xx> テキストボックス内の「文字」の大きさを変更するにはどうすればよいでしょうか。 HTMLタグ、JavaScript、CSSでできる方法を教えてください。

  • 入力モード 自動 切り替え

    フォームでの入力モードを自動的に切り替えたいと考えています。 ・全角ひらがな ・全角カタカナ ・半角英数 をそれぞれのフォームで自動的に入力モードを切り替えたいです。 以下のjavascriptでMS-IMEのみ全角、半角の切り替えが可能なようですが、MAC環境や全てのユーザーに対して制御できる方法は無いでしょうか? <script type="text/javascript"><! function set_imemode(myobj, mymode){ switch(mymode){ case 0: myobj.style.imeMode = "inactive"; break; case 1: myobj.style.imeMode = "active"; break; default: break; } } // ></script> お名前(全角) <INPUT name="name" type="text" value="" onFocus="set_imemode(this, 1)"><br> 電話番号(半角) <INPUT name="tel" type="text" value="" onFocus="set_imemode(this, 0)">

専門家に質問してみよう