- ベストアンサー
onChangeの使い方について教えてください。
javascriptで困っています。助けてください。 テキストボックスに入力された値をonChangeで検出し、入力内容をチェックしようとしています。 テキスト入力後、テキストボックスからフォーカスを外せば、問題なく作動するのですが、 テキストを入力し、フォーカスを外さずに、そのまま送信ボタンを押すと、 チェック結果を待たずに、次のファイル(画面)に移ってしまいます。 多分、onChangeを使う上で、よく発生する問題かと思うのですが、 みなさん、どのように回避されているのでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function check(){ alert('チェック'); } //--> </script> </head> <body> <form method="get" action="reg.php"> タイトル<br> <input type="text" name="title" onChange="check()"><br> <input type="submit" value="送信"><br> </form> </body> </html>
- xyz_1990
- お礼率66% (127/191)
- JavaScript
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<form> <input type="text" onkeyup="document.getElementById('orz').disabled=this.value!='test'"/> <input id="orz" type="submit" disabled="true"/> </form> IEとFFで、submitが押されたときの画面遷移のタイミングが違うので、 (FFだとonsubmitをハンドルしないとだめっぽい)、チェックを通らない限りsubmitボタンを押せなくしてしまうというのが、わかりやすくていいかもしれません。
その他の回答 (3)
- redfox63
- ベストアンサー率71% (1325/1856)
titleに対して onkeypressイベントを記述してはいかがでしょう <input type="text" name="title" onChange="return check();" onKeypress="return keycheck();"> として function check() { window.alert('チェック'); // titleの入力がtestならOK それ以外は NG return window.event.srcElement.value == "test"; } function keycheck() { if ( window.event.keyCode == 0x0D ) { return check(); } return true; }
補足
ご回答ありがとうございます。 ご教授頂いた方法では、IEでは上手く動いたのですが、FireFoxだと状況は変わりませんでした。
- yambejp
- ベストアンサー率51% (3827/7415)
通常はformにonSubmitを設定してチェックします
補足
ご回答ありがとうございます。 サンプルのコードではテキストボックスが1つですが、実際には同一画面に複数のテキストボックスを設定しようとしています。(タイトル、コメント、カテゴリなど) また、データベース内で、タイトルが重複しないように使用としています。 このため、全てを入力した後チェックをすると、タイトルが重複していた場合、全ての入力が無駄になってしまいます。 そこで、タイトルの入力が終了した時点で、チェックを行いたいのです。 説明不足で申し訳ございませんでした。
onChangeで入力内容をチェックするのではなく、送信前にチェックしてはいかがでしょうか？
補足
ご回答ありがとうございます。 送信前にチェックをしたいのですが、 今の状態だと、チェックをする前に送信ボタンを押された時におかしなことが起こってしまいます。
関連するQ&A
- FireFoxでfocus()が上手く動かない
javascriptを使って、 フォームのテキストエリアの入力文字数をチェックし、 オーバーしていれば、アラートを出し、テキストエリアにフォーカスを移動させる。 ようにしようとしています。 IEでは動いてのですが、FireFoxだと上手くフォーカスが移動してくれません。 どこがまずいのか、教えてください。 コード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function checkText(aText) { if (aText.value.length > 1) { alert('サイズオーバーです'); aText.focus(); } } //--> </script> </head> <body> <form method="post" action="#"> <input type="text" name="fmTitle" onBlur="checkText(this)"> <input type="text" name="dummy"> </form> </body> </html>
- ベストアンサー
- JavaScript
- formとalert
javascript初心者です。 formを使ってテキストボックスに入力された文字をalertを使って表示させたいのですが、functionの中の記述がよくわかりません。 formを使った参考資料も見つからず質問するに至りました。 教えていただければと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>練習</title> <script type="text/javascript"> </script> </head> <body> <form name="a">文字を入力: <input type="text"size="20" name="name1" ><br> <input type="button" name="name2" value="確認" onclick="alert(chk)"> </form> <script type="text/javascript"> function chk(){ var n=document.a.name1.value; alert(n); } </script> </body> </html>
- 締切済み
- JavaScript
- テキストフォームの内容をページ内に表示する方法
初めて質問します。 JavaScriptも初心者です。 初めてづくしで見苦しい点もあるかと思いますが、よろしくお願いします。 複数のテキスト入力欄に書き込まれた内容をページ内に表示したいと思い、下のようなコードを書いています。 ---------- <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> <!-- function output(){ document.write(document.forms[0].text1.value); document.write("<br>"); document.write(document.forms[0].text2.value); document.write("<br>"); } // --> </script> <form action="#" name="form1"> <input type="text" name="text1"> <input type="text" name="text2"> <input type="button" value="output" onclick="output()"> </form> </body> </html> ---------- forms[0]以降、forms[1]、forms[2]…と同様に続けたいと思ってこのようにしたのですが、 function output()内の3行目でつまってしまうようです。 入力欄オブジェクトの指定方法がまずいのかも、とも思うのですが… Statement on line 6: Cannot convert undefined or null to Object というエラーメッセージが出ています。 自分で使うためのプログラムで、体裁にこだわるつもりはありません。 何かよい解決方法はないでしょうか。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- textbox内の文字数を判別しfocusを移動させる
textbox内の文字数を判別しfocusを移動させるプログラムを書いたのですが、２つ目のtextboxから記入したりするとうまく動作しません。どうしたらいいのでしょうか？カーソルがどのtextboxにあるか(どのtextboxにfocusしているか)を参照しようとしたのですがそのような関数はあるのでしょうか？教えてください。 <html> <head><title>checkLength</title> <script language="JavaScript"> <!-- document.onkeyup=checkLength; function checkLength() { if(document.form1.text1.value.length==3) document.form1.text2.focus(); if(document.form1.text2.value.length==5) document.form1.text3.focus(); } //--> </script> </head> <body bgcolor="#ffffff"> <form name="form1">半角英数で入力してください。<br> 1...<input type="text" name="text1" size="7"> 3文字入力するとカーソル移動<br> 2...<input type="text" name="text2" size="7"> 5文字入力するとカーソル移動<br> 3...<input type="text" name="text3" size="7"> </form> </body> </html>
- ベストアンサー
- JavaScript
- textareaに文字列を追加する方法
JavaScript超初心者です。初めて質問します。 2つのテキストエリアに入力されたものを、3つ目のテキストエリアに文字を追加して、入力するスクリプトを作ろうとしています。 ネットで似たようなものを見つけてきて、アレンジしてみたのですが、2つ目の文字を入力するためのボタンをクリックすると、1つ目の文字が消えてしまいます。 姓：AAA/名：BBB と続けて追加されるようにするには、どうしたらよいのでしょうか？ どなたかお助けください。よろしくお願いいたします。 ＜作成中のページ＞ <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title></title> <script language="JavaScript"><!-- function setData() { txt1= document.form7.t1.value; document.form7.list.value = "姓："+ txt1; } function setData1() { txt2= document.form7.t2.value; document.form7.list.value = "名："+ txt2; } // --></script> </head> <body> <form name="form7"> 姓<TEXTAREA name="t1" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData()><br> 名<TEXTAREA name="t2" size="10" rows="1"></TEXTAREA><input type="button" value="済" onClick=setData1()><br> <textarea rows="9" cols="20" name="list"></textarea><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- onChange()メソッド
失礼致します。 質問させてください。 今jspのtextboxフォームにjavascriptの機能をつけようとしています。付ける機能は簡単に言うと、値がフォームに入力されたとき（もしくは入力されてフォーカスが外れたとき）、その値が１００より大きければアラートを出す機能です。 // jsp <input type = text size="12" name="hi" value = <%= hi %> onchange="fast('<%=hi%>');"> // Javascript <script language="javascript" type="text/javascript"> function fast(hi) if (hi > 100 ) { alert("１００以下で入力してください"); } しかしこのままだとテキストボックスの値変更前の値が比べられてしまいます。onblurにしても同じでフォーカスを当てる前の値が参照されてしまいます。スクリプトのほうでdocument.frm.hi.value= ・・と値を取得すればフォームがひとつの場合うまくいくのですが、複数個になるとフォームの指定に問題が出てきます。onchengeではなく、何か値を変更した後の値を参照できるような方法はないでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- チェックボックスONでジャンプ
javascript初心者です。 現在チェックボックスをONにすると別の商品のページにジャンプするという シンプルなものを作っているのですが、Chromeではきちんと動作するのに、 その他のブラウザ（firefox opera ie)で動作しません。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function chkClick() { if (formTest.chkTest.checked) { location.href="item123.html"; } } //--> </script> </head> <body> <form act="test.cgi" id="formTest" method="post"> <input type="checkbox" name="chkTest" value="1" onclick="chkClick()"> </form> チェックを入れると商品１２３のページへ </body> どこか記述が間違っているところがありますでしょうか？ ご指摘頂ければ助かります。よろしくお願い致します。
- ベストアンサー
- JavaScript
- IE7のonChangeイベントを使用して入力チェック
textフィールドのonchangeイベントでjavascriptの入力チェックを行い、エラー時はフォーカスをエラー項目に戻し、カーソルを移動できないようにしたいです。 --想定している動作 (1)test1_fieldに1以外の値を入力し、tabなどで移動する。 (2)javascriptのcheck1()でエラーチェック。エラー「test1_field NG」が表示され、カーソルがtest1_fieldに戻る。 再度、カーソルを移動しようとすると、(2)の動作を行う。 --実際の動作 IE6(XP+IE6sp2)では、以下のテストスクリプトで想定している動作をしていたのですが、IE7(Vista+IE7)では、return falseを返しても、test2_fieldにフォーカスが移動できてしまいます。 --テストコード <html> <script> function check1(obj){ if (obj.value==1){ return true; } alert("test1_field NG"); obj.focus(); obj.select(); return false; } function check2(obj){ if (obj.value==2){ return true; } alert("test2_field NG"); obj.focus(); obj.select(); return false; } </script> test1_field:<input type="text" name="test1_field" onchange="return check1(this)" >(1のみOK)<br><br> test2_field:<input type="text" name="test2_field" onchange="return check2(this)" >(2のみOK) </html> 記述等に間違いがあるのでしょうか？ ご教授いたがければ幸いです。
- 締切済み
- JavaScript
- HTMLのJavaScriptが動作しない
以下のプログラムのとおり、HTMLにテキストボックスを設置して、FORMタグのACTIONで次のPHP(PHTML)ファイルへ送る仕組みを作っています。 JavaScriptでテキストボックスが空白の場合にチェックするようにしているのですが、動作せずに次のPHPへ渡してしまいます。 詳しい方よりご教授頂ければと思います。 お手数お掛けして申し訳ございませんが、よろしくお願いいたします。 ・HTML # more index.html <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY bgcolor="#ffffff" onload="Scrmsg()"> <SCRIPT language=JavaScript type=text/javascript> function generatorCheck(){ if(document.toroku.word1.value == ""){ alert("空白です。"); return false; } if(document.toroku.word2.value == ""){ alert("空白です。"); return false; } } </SCRIPT> <form method="POST" action="result.phtml"> <TABLE cellpadding=10> <tr><td><B>入力項目1</B></td><td><input type="text" name="word1" size=34></td><td>(例：)</td></tr> <tr><td><B>入力項目2</B></td><td><input type="text" name="word2" size=34></td><td>(例：)</td></tr> </table> <BR> <input type=submit value="作成" onClick=generatorCheck()><input type=reset value="消去"> </form> </TABLE> </BODY> </HTML> ・PHP(PHTML) # more result.phtml <? require('../include/init.inc'); $word1 = $_POST{'word1'}; $word2 = $_POST{'word2'}; ?> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <LINK href="index.css" type="text/css" rel="stylesheet"> </HEAD> <BODY bgcolor="#ffffff" onload="Scrmsg()"> <? print ("</BR>"); print ("<B>".$word1."</B>"); print ("</BR>"); print ("<B>".$word2."</B>"); print ("</BR>"); ?> </BODY> </HTML>
- ベストアンサー
- HTML
- このソースどういう意味ですか【JavaScript】
<HTML> <HEAD> <TITLE>JavaScript Sample</TITLE> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> </HEAD> <BODY> : <INPUT TYPE="button" VALUE="OK" onClick="～"> : </BODY> </HTML> このソースの中の <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> の部分ってどういう意味ですか？ 特にTypeとHTTP-EQUIVの部分については個別で詳しく知りたいです。 回答よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 この方法で、狙いの機能が実現できました。 ご回答頂いた、皆様にも、お礼を申し上げます。 どうも、ありがとうございました。