JavaScriptでテキストエリアに数字のみ入力制限する方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptを使用して、テキストエリアに数字のみを入力できるようにする方法について教えてください。
  • テキストエリアに入力された値から数字以外の文字を除去するJavaScriptのコードを記述しましたが、キーコードによる入力制限は考慮していません。どのように改善すればよいでしょうか？
  • これまでのコードでは、テキストエリアに入力された値から数字以外の文字を除去することができますが、キーコードによる入力制限が欠けています。改善策をお教えください。
回答を見る
  • ベストアンサー

javascriptの入力制限keycode除く

はじめまして javascript初心者です テキストエリアに数字のみ入力できるようにしたいと思い 以下のとおりソースを記述しました function numCheck(){ var num = document.frm.txt.value; var cnum = num.replace(/[^0-9]/,""); num = cnum; document.frm.txt.value = num; <form name = "frm"> <input type="text" onkeypress="numCheck()" value="txt"> </form> キーコードによる入力制限は考えません あと何が足りないでしょうか？ よろしくご教授くださいｍ（＿＿）ｍ

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

とりあえずinputはvalueじゃなくてnameで・・・ keyupとblurでチェックした方がよいかも <script> function numCheck(obj){ var v = obj.value; obj.value = v.replace(/[^0-9]*/g,""); } </script> <form> <input type="text" onkeyup="numCheck(this)" onblur="numCheck(this)" name="txt"> </form>

yuitanpapa
質問者

お礼

回答ありがとうございます 親切にご教授いただきありがとうございました これからもがんばってもっと勉強します onkeyupとonblurのチェックですね 早速やってみますっ！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascript form送信後の動作

    以下のスクリプトでiframeにデータは送信できているんですが、<input type="text">に入力したテキストが残ってしまいます。どのように記述したらうまくいくでしょうか？ <script type="text/javascript"> function send(){ var frm=document.txt_submit; frm.submit(); frm.reset(); } </script> <form name="txt_submit" action="log.cgi" method="post" target="log" autocomplete="off"> <input type="text" name="ctxt" size="20" value=""> <input type="button" value="送信" onclick="return send();"> </form>

  • JavaScript テキストボックス キーイベント

    JavaScript テキストボックス キーイベント こんにちは。趣味でプログラミングをしている者です。 タイマーを使って計算ドリルを作ったのですが、 特定のキーコードで正解かどうか判定する関数を呼び出そうとしたのですが、 テキストボックスにこたえを入力して、キーを押すたびに 「キーン」というような音が鳴るのですが、 その音は、どのような仕組みで鳴るのでしょうか？ また、音を鳴らさないようにする方法がありましたら、 教えていただけないでしょうか よろしくお願いします <html> <head> <script type="text/javascript"> function init() { document.attachEvent("onkeypress", KotaeAwase); } function KotaeAwase() { if( event.keyCode == 13) { var key = 1; var kotae = parseInt( document.Form1.kotae.value ); var Result = document.Form1.result; if( kotae == key ) Result.value = "せいかいです!"; else Result.value = "ちがいます"; } } </script> </head> <body onLoad="init();"> <form name="Form1"> <input type="text" name="kotae" size="20"> <br><br> <input type="text" name="result" size="20"> <br> </form> </body> </html>

  • javascriptで困っています。教えてください

    JavaScriptで配列をPOST送信しようとしています。 <form>や<input>を作っておいてではなく、javascriptで生成する関数からしたいと思っています。以下のコードでうまくいきません。 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var ar = new Array(5); ar[0] = 111; ar[1] = 222; ar[2] = 333; ar[3] = 444; ar[4] = 555; function sampleForm(value){ var form = document.createElement('form'); document.body.appendChild( form ); var input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','hidden_input'); input.setAttribute('value', value); form.appendChild(input); form.setAttribute('action','send.php'); form.setAttribute('method','post'); form.submit(); } </script> </head> <body> <a href=“javascript:sampleForm(ar)”>クリックしたら“samplepost”をPOST送信</a> </body> </html> send.php-------------------------------- <?php $num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null; print "num: " . $num; ?>

  • java 計算フォームで未入力の場合ゼロとしたい

    java を使ってweb上で計算フォームを作成しています フォームに数値が入力された場合は問題なく計算結果に反映できますが、未入力のフォームがあると計算結果が反映されません。 未入力のフォームはゼロの値として計算結果を反映させたいのですが、どうしてもできなかったのでお力をお貸頂ければ助かります＞＜ フォームに最初からゼロの値を入れておく方法もあるのですが、ゼロが消された場合は未入力となってしまい計算結果に反映されないので、あくまで未入力の場合はゼロとして計算結果に反映させたいと思っています。 [script LANGUAGE="JavaScript"] function calc() { var s1, s2, s3, s4, ss; s1 = eval(document.form01.txt01.value); s2 = eval(document.form01.txt02.value); s3 = eval(document.form01.txt03.value); ss = s1+s2 +s3; if(ss < 30000) document.form01.txt04.value = ss*0.3; else if(s5 >= 30000) document.form01.txt04.value = ss*0.5; } [/script] <form name="form01"> <input style= type="TEXT" name="txt01" /> <input style= type="TEXT" name="txt02" /> <input style= type="TEXT" name="txt03" /> <input onclick="calc()" type="button" value="計算する" /> <input style= type="TEXT" name="txt04" /> </form> よろしくお願いします

  • javascriptでフォームの値の計算

    javascript1か月目の初心者です。 7つのテキストフィールドに数値を代入させて合計と平均（最後には標準偏差）を計算しようと思ってます。 以下のように考えましたが、うまくいきません。 strが文字列として？扱われてしまっているようです。 strをevalで囲んでみてもダメです。 詳しい方教えてください。 <!--スクリプト1--> <SCRIPT LANGUAGE="JavaScript"> <!-- function f_check() { if(document.F1.num1.value!=""&&document.F1.num2.value!=""&&document.F1.num3.value!=""&&document.F1.num4.value!=""&&document.F1.num5.value!="" &&document.F1.num6.value!=""&&document.F1.num7.value!=""){ str=0 for(var i = 0;i<document.F1.length;i++){ str+=document.F1[i].value; } alert('合計は'+str+"です"); avrg = (str)/document.F1.length; alert('平均は'+avrg+'です'); //ここから標準偏差の計算(略)。 } // --> </SCRIPT> <form method="post" name="F1" onSubmit="return f_check()"> 数値を入れてください<input type="text" name="num1" size="5"><br> 数値を入れてください<input type="text" name="num2" size="5"><br> 数値を入れてください<input type="text" name="num3" size="5"><br> 数値を入れてください<input type="text" name="num4" size="5"><br> 数値を入れてください<input type="text" name="num5" size="5"><br> 数値を入れてください<input type="text" name="num6" size="5"><br> 数値を入れてください<input type="text" name="num7" size="5"><br> <INPUT TYPE=SUBMIT VALUE="平均をとる"></FORM>

  • JavaScriptの計算のNaNの判定について…

    いろいろなアドバイスを参考に以下のようなプログラムを作り、値が正の時はちゃんと計算されるのですが負の時はNaNと判定されてしまいます。どうしたら負の場合でもちゃんと計算されますか？いろいろ調べたのですが見つかりませんでした…。よろしくお願いします。 <html> <body> <script type="text/javascript"> var rslt1 = 0; var rslt2 = 0; var rslt3 = 0; function hoge1(){ var a=document.getElementById('a').value; var b=document.getElementById('b').value; var rslt; if (a==1 && b==1) { rslt1=-100; } else { if (a==1 && b==2) { rslt1=-90; } else { if (a==2 && b==1) { rslt1=-80; } else { rslt1=-70; }}} document.getElementById('txt1').value=rslt1; sum1(); } function hoge2(){ var a=document.getElementById('a').value; var c=document.getElementById('c').value; var rslt; if (a==1 && c==1) { rslt2=-95; } else { if (a==1 && c==2) { rslt2=-85; } else { if (a==2 && c==1) { rslt2=-75; } else { rslt2=-65; }}} document.getElementById('txt2').value=rslt2; sum1(); sum2(); } function hoge3(){ var a=document.getElementById('a').value; var d=document.getElementById('d').value; var rslt; if (a==1 && d==1) { rslt3=-60; } else { if (a==1 && d==2) { rslt3=-50; } else { if (a==2 && d==1) { rslt3=-40; } else { rslt3=-30; }}} document.getElementById('txt3').value=rslt3; sum2(); } function sum1() { document.getElementById('txt4').value=rslt1 + rslt2; } function sum2() { document.getElementById('txt5').value=rslt2 + rslt3; } function sum3() { document.getElementById('txt6').value=((document.getElementById('txt4').value + rslt2 + document.getElementById('txt5').value * 2) / 4); } </script> <select id="a" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>　　 <select id="b" onChange="hoge1()"> <option value="1">1<option value="2">2 </select>　　 <select id="c" onChange="hoge2()"> <option value="1">1<option value="2">2 </select> <select id="d" onChange="hoge3()"> <option value="1">1<option value="2">2 </select><p> <input type="text" id="txt1" value=""><p> <input type="text" id="txt2" value=""><p> <input type="text" id="txt3" value=""><p> <input type="text" id="txt4" value=""><p> <input type="text" id="txt5" value=""><p> <input type="text" id="txt6" value=""><p> </body> </html>

  • javascriptでわからないことがあります。

    javascriptで判定ボタンを押したらぐ偶数、奇数の判定をするプログラムを作っているのですが数値以外が入力されたら２回目のelse ifで「数値を入力してください」と表示したいのですが調べてもよくわかりません。 また、判定ボタンを押したときにテキストボックスの中が空白であったり、数値以外が入力された場合に「数値を入力してください」と表示しますが続けて偶数、奇数の判定もしてしまうので困っています。 ソースコードです↓ function han2(){ var frm_txt1=document.F1.han1.value; var frm_txt2=parseInt(frm_txt1); if(frm_txt2=="") { alert("数値を入力してください"); } else if() { alert("数値を入力してください"); } if(frm_txt2%2==0) { alert(frm_txt2+"は偶数です"); } else { alert(frm_txt2+"は奇数です"); } } 文章が下手ですみませんがよろしくお願いします。

  • 2つのjavascriptを組み合わせたい

    フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // （後で使う: 二重送信防止） var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() { 　　var tel3 = document.form1.tel.value; 　　var fax3 = document.form1.fax.value; 　　var isValid = true; 　　if (!tel3) { 　　　　alert("電話未入力"); 　　　　isValid = false; 　　} 　　if (!fax3) { 　　　　alert("FAX未入力"); 　　　　isValid = false; 　　} 　　if (!isValid) { 　　　　return; 　　} 　　document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>

  • Javascriptを短くしたい

    初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、 以下のサンプル文のような形では、項目数が増えるとその分だけ どんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。 よろしくお願いします。 <script type="text/javascript"> <!-- function Hyo1(num) { if (num == 0) { document.getElementById("cont1").style.display="block"; } else { document.getElementById("cont1").style.display="none"; } } function Hyo2(num) { if (num == 0) { document.getElementById("cont2").style.display="block"; } else { document.getElementById("cont2").style.display="none"; } } // --> </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>

  • VBSからjavascript

    下記ソースの指定の箇所からjavascriptのfunction fun1(1)をよびたいのですがどう記述したらいいでしょうか。 （ちなみにbody onload=は使わない条件です） <%@ LANGUAGE = VBSCRIPT %> <html> <head> <script type="text/javascript"> <!-- //禁止、許可 function fun1(is){ var is; var i; var jj; jj=document.form1.text2.length; for (i=0;i<jj;i++){ if (is==1) document.form1.text2[i].disabled=true; if (is==2) document.form1.text2[i].disabled=false; } } //--> </script> </head> <html> <body> <form name="form1"> <input type="text" name="text2" size="14" maxlength="8" value="ABC"> <input type="text" name="text2" size="14" maxlength="8" value="DEF"> <% <-------------------ここでfun1(1)をよびたい fun(1)と書いてもエラー >% </form> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する