• ベストアンサー

値の取得について

IPアドレス入力欄のように以下のソースのような流れを作成したのですが、エリアに３文字入力をして、入力したものの最後の文字が数字であったら、キーボードのTabを使っても、onKeyUpで呼んだ関数でも、その入力した３文字が数字だと認識してすぐ横のエリアに移りたいのですが、その入力をした際の３文字目の値を取得することは可能なのでしょうか？Whichを使ってString.fromCharCodeを使って押されたキーを取得しようとしたのですが、構文エラーになってしまい、困っています。 例 入力したものが1a1→数字と認識されて横のエリアに飛ぶ 　　　　　　　　11a→三文字目が"a"だから数字でないので飛ばない <script language="JavaScript"> <!-- var str; var data; function tobu1(){ str = document.form1.txt3.value; data = str.match(/[^0-9]/g); if( str.length >= 3 && !data ) document.form1.txt4.focus(); } ・・・ <body> <INPUT type="text" name="txt2" size="3" value="" maxlength="3" onKeyUp="tobu1()" onFocus="this.select()">． <INPUT type="text" name="txt3" size="3" value="" maxlength="3" onKeyUp="tobu2()" onFocus="this.select()">． <INPUT type="text" name="txt4" size="3" value="" maxlength="3" onKeyUp="tobu3()" onFocus="this.select()">． <INPUT type="text" name="txt5" size="3" value="" maxlength="3" onFocus="this.select()">

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

  • ベストアンサー
  • you111111
  • ベストアンサー率45% (20/44)
回答No.2

以下では如何でしょう？ <html> <head> <title>テキストフィールド移動</title> <script Language="JavaScript"> <!-- function tobu(i) { if(frm1.elements["txt" + i].value.length == 3) if(48 <= event.keyCode && event.keyCode <= 58) frm1.elements["txt" + (i+1)].focus(); } // --> </script> </head> <body> <form name='frm1'> <INPUT type="text" name="txt1" size="3" value="" maxlength="3" onKeyup="tobu(1);" onFocus="this.select();">- <INPUT type="text" name="txt2" size="3" value="" maxlength="3" onKeyup="tobu(2);" onFocus="this.select();">- <INPUT type="text" name="txt3" size="3" value="" maxlength="3" onKeyup="tobu(3);" onFocus="this.select();">- <INPUT type="text" name="txt4" size="3" value="" maxlength="3" onFocus="this.select();"></form> </form> </body> </html> 更に３文字目が数字以外のときタブも効かなくする(様に見せる)のなら、２番目以降のテキストのonfocus="this.select();"をonfocus="chkTxt(一個前のテキストフィールドの番号);this.select();"に変え以下追加 function chkTxt(i) { if(frm1.elements["txt" + i].value.length == 3) if(isNaN(str.substring(2))) frm1.elements["txt" + i].focus(); } (↓おまけです) 飛ばずにしかも、入力フィールドの選択状態にするなら(３文字目が数字で無いときアラートを出すならいらない処理でしょうが) tobu(i)を以下のように function tobu(i) { if(frm1.elements["txt" + i].value.length == 3) { frm1.elements["txt" + (i+1)].focus(); if(48 > event.keyCode || event.keyCode > 58) frm1.elements["txt" + i].focus(); } }

tohiyo
質問者

補足

回答ありがとうございます。かなり参考になりました(^^)この処理に加えて数字の入力だけ受けつけ、他の文字は入力できないようにすることはできるのでしょうか？

その他の回答 (2)

  • you111111
  • ベストアンサー率45% (20/44)
回答No.3

>この処理に加えて数字の入力だけ受けつけ、他の文字は入力できないようにすることはできるのでしょうか？ 各テキストフィールドのonkeypressイベントで以下を呼び出せば可能かと。 function Chk() { if(48 > event.keyCode || event.keyCode > 58) event.keyCode = 0; }

tohiyo
質問者

お礼

皆様回答ありがとうございました。かなり参考にさせていただきました。

  • Y_eRu
  • ベストアンサー率32% (33/101)
回答No.1

こんにちわ タブキーの問題は解決されましたか？ もしよろしかったらどうやったのか私にも教えてくださいm(__)m えっと この問題についてなのですが tobu1()のif文の条件と順番を変えたらどうでしょうか？ 例えば function tobu1(){ 　str = document.form1.txt3.value; 　if ( str.length >= 3 ) { 　　moji = str.charAt(2); 　　if (moji.match(/[^0-9]+/)){ 　　　return; 　　}else{ 　　　document.hoge.textbox2.focus(); 　　} 　} } 3文字以上書かれてる→3文字目を取得→数字か判定→数字の場合移動 こんな感じではダメでしょうか？ 失礼しましたC= C= ＼(;・_・)/

参考URL：
http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_098.html
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • selectでinputの表示を変えたい

    セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか？ 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。

  • テキストボックスのフォーカス移動

    こんにちは。 htmlページで<input type="text"/>に既定の桁数を入力したら次のinputにフォーカスを 移動させたいと考えています。 下の例の場合、１番目のテキストボックスに既定の桁数5ケタを入力したら、フォーカス を２番目のテキストボックスに移動させ、２番目のテキストボックスに4ケタ入力したら ３番目のテキストボックスにフォーカスを移動させるようにしたいと思っています。 スクリプトの再利用ができるよう、たとえば同じname属性を与えればその範囲内で 簡単にフォーカスを移動させられるようなものにしたいと思うのですが、うまくいきません。 何か良い書き方はありませんでしょうか？ <div> 　<input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/> 　<input type="text" name="hoge" maxlength="4" onkeyup="test(this)"/> 　<input type="text" name="hoge" maxlength="5" onkeyup="test(this)"/> 　<input type="text" name="hoge" maxlength="2" onkeyup="test(this)"/> </div> 　・ 　・ <script type="text/javascript"> function test(elm) { 　if (elm.value.length >= elm.maxLength) { 　　/*（気持ちとしては、ここにこのような感じのことを書きたいのですが・・・） 　　　　var arr_elm = document.getElementsByName(elm.name); 　　　　var n = elm.index + 1 　　　　arr_elm[n].focus(); 　　*/　 　} } </script>

  • 入力に関して。

    以下のソースのようにテキストボックスを４つくらい並べて、最大入力文字数になったら、自動的に右のテキストボックスに入力できるようにすることはできるのでしょうか？ <html> <head> <title></title> </head> <body> <form name="form1"> <input type="text" name="txt1" size="7" maxlength="3">． <input type="text" name="txt2" size="7" maxlength="3">． <input type="text" name="txt3" size="7" maxlength="3">． <input type="text" name="txt4" size="7" maxlength="3"> </form> </body> </html>

  • フォームに入力した値の制御について

    フォームに入力した値の制御について いろいろと調べてみたのですが、 どうすれば良いか分からないので、 質問をさせて頂きました。 【概要】 フォームの[text]と[textarea]に入力をしてもらいたい 入力値のサンプルを表示されるようにしました。 カーソルを[text]と[textarea]に入れると、 入力値のサンプルの表示が消えて入力出来るようにしました。 【やりたい事】 [text]と[textarea]に入力をしてもらった値を、 最終的にtextareaに出力させるようになっています。 何も入力せず出力をさせると、サンプル値は出力されてしまいます。 [text]と[textarea]に入力をした値のみ出力させることは可能でしょうか。 ご教授頂ければと思います。 よろしくお願いいたします。 【ソース】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN Frameset" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <script type="text/javascript"> <!--ログ生成スクリプトを取得--> function textoutput(formObj) { <!--text01を取得--> var text01 = formObj.elements["text01"].value; <!--text02を取得--> var text02 = formObj.elements["text02"].value; <!--textarea01を取得--> var textarea01 = formObj.elements["textarea01"].value; <!--textarea02を取得--> var textarea02 = formObj.elements["textarea02"].value; <!--出力データを作成--> var text = ''; <!--text3データを作成--> if(text01!==""){ text += '質問1：' + '\n'+　text01 + '\n'; } <!--text2データを作成--> if(text02!==""){ text += '質問２：' + '\n'+　text02 + '\n'; } <!--textarea01データを作成--> if(textarea01!==""){ text += '質問３：' + '\n'+　textarea01 + '\n'; } <!--textarea02データを作成--> if(textarea02!==""){ text += '質問４：' + '\n'+　textarea02 + '\n'; } <!--出力データを作成--> formObj.elements["output"].value=text; } </script> </head> <body> <form name="form01"> <strong>・諮問１：</strong><br> <input type="text" name="text01" value="１入力してください" id="p1"　size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問2：</strong><br> <input type="text" name="text02" value="2入力してください" id="p2"　size="30" class="disabled" onfocus="if (this.value == defaultValue) this.value = '';" onblur="if (!this.value) this.value = defaultValue;"><br> <strong>・諮問3：</strong><br> <textarea name="textarea01" id="textarea01" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> ３入力してください </textarea><br> <strong>・諮問4：</strong><br> <textarea name="textarea02" id="textarea02" cols="60" rows="5" onfocus="if(this.value == this.defaultValue) this.value=''" onblur="if(this.value == '') this.value=this.defaultValue"> ４入力してください </textarea><br> <strong>・出力結果：</strong><br> <input type="button" value="ログ出力" onClick="textoutput(this.form);">&nbsp;<br> <textarea cols=60 rows=20 name="output" ></textarea> </form> </body> </html>

  • Ｔａｂに関して

    以前以下のソースのようにテキストボックスを４つくらい並べて、最大入力文字数になったら、自動的に右のテキストボックスに入力できるようにすることはできるのでしょうか？ と質問をし、返答を頂いたのですが、自動的に右のテキストボックスに入力できるようにはなったのですが、キーボードのＴａｂを使ってしまうと、全てのテキストボックスが最大になっていて、はじめのボックスでタブを押すと、３つめのボックスに飛んでしまいます。何か回避する方法がありましたら教えてください。 <html> <head> <title></title> </head> <body> <form name="form1"> <input type="text" name="txt1" size="7" maxlength="3">． <input type="text" name="txt2" size="7" maxlength="3">． <input type="text" name="txt3" size="7" maxlength="3">． <input type="text" name="txt4" size="7" maxlength="3"> </form> </body> </html>

  • クリックすると表示されていた説明文が非表示になる設定

    フォームの作成の件で不明な点があるのでどなたかご指導お願いします。 やりたいことは、 テキストフィールドにページ読み込み時は説明文を表示しておいて、 そのフィールドがクリックされると説明文が非表示になり、入力が出来る。 という事をやりたいんですが、 ある雑誌に<textarea>～</textarea>でのやり方が書いてあったのですが、 <input～>でやろうと思ったら出来ませんでした。下のタグでやってみました。 最初に表示しておきたい説明文は「※半角で入力」です。 <input name="message" type="text" class="textbox"id="message" onFocus="if(this.value=='※半角で入力')this.value='';"onBlur="if(this.value=='')this.value='※半角で入力';" value="※半角で入力" size="20" maxlength="10"> 宜しくお願いします。

  • value内に変数を入れたい

    お世話になります。 <INPUT type="text" name="seikai" size="10" value="" onfocus="this.blur()"> このvalue=""の中にjavascriptで定義した変数を入れる方法ってあるんでしょうか？　

  • JavaScriptで、SELECTの値で、TEXTを入力可と入力不可

    JavaScriptで、SELECTの値で、TEXTを入力可と入力不可に分けたい。 現在、以下のフォームを作成しています。 <form method="post" action="/" name="formname"> <select name="test[0]" size="1" onchange="selectChange(0)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <select name="test[1]" size="1" onchange="selectChange(1)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <br> <input name="txt[0]" type="text" value="" size="10"> <br> <input name="txt[1]" type="text" value="" size="10"> </form> このフォームで、例えば、selectのtest[0]でvalueの「C」が選択された場合、 txt[0]が入力できないようにしたいと考えています。 また同様に、test[1]でvalueの「C」が選択された場合は、txt[1]が入力出来ないように したいです。 以下のようなJavaScriptを書きましたが、上手く動きません。 function selectChange(value) { var answer = document.formname.elements["test[value]"].selectedIndex; if(answer == "C") { document.formname.elemens["txt[value]"].disabled = false; } else { document.formname.elemens["txt[value]"].disabled = true; } } どなたか教授頂けましたら、幸いです。 よろしくお願いします。

  • JavaScriptで簡単な計算機を作りたいのですが…

    初めて質問させていただきます。タイトルどおり、以下の様なコードを組んだのですが答えが表示されません。なにぶんJavaScriptを勉強し始めて数日の初心者なもので、どこが悪いのか見当がつきません。レベルの低い質問で申し訳ないのですが、皆さんのお知恵をお貸しください。 <html> <head> <title>JAVAscript</title> <SCRIPT LANGUAGE="JavaScript"> <!-- function func(){ a=parseInt(document.masu.0.value); b=parseInt(document.masu.1.value); c=a+b; document.masu.2.value=c; //--> </SCRIPT> </head> <body> <form name="masu"> <input type="text" name="0" SIZE=10 onkeyup="chkNum(this)"> <input type="text" name="1" SIZE=10 onkeyup="chkNum(this)"> <input type="text" name="2" SIZE=10"onkeyup="chkNum(this)"> <input type="button" value="計算" onclick="func()"> </form> </body> </html>

  • INPUTで入力された値やSELECTで選択された値の取得

    以下のようなHTMLで出力されるページにおいて入力された値を取得したいと思っております。 <div id="div1"> 現在<input type="text" name="TXT1" id="TXT1" size="10">が入力されています。 <br> 現在<select size="1" name="SLCT1" id="SLCT1"> <option>項目1</option> <option>項目２</option> <option>項目３</option> </select>が選択されています。 </div> 値を取得するには v1 = document.getElementById("TXT1").value で取得できるのはわかっているのですが たとえば、TXT1に「文字列１」を入力し、SLCT1で「項目２」を選択している状態で、 "現在文字列１が入力されています。現在項目２が選択されています。" のようにDIV1の中に表示されている文字列全体を取得することはできるのでしょうか。 IEでinnerTEXT、FirefoxでtextContentを利用して取得を試みたのですが、うまくいきません。 何かいい方法があればご教授願えますでしょうか。 現在想定している状況ですと、DIVの中に配置されるINPUTやSELECTの数なども不定でして、それら要素のidも不定であります。 よろしくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する