テンキーで「0.1」を打つと「.1」になる
- テンキーで「0.1」を打つと「.1」になってしまいます。「0.1」になる方法を教えて下さい。
- HTMLページにテンキーを打つと数字が出るといったものをしたくて、検索しましたところ、参考サイトを見つけました。参考サイトのソースコードから、「0.1」とテンキーを打っても「.1」と表示される方法を知りたいです。
- テンキーを使ってHTMLページに数字を入力したいのですが、テンキーで「0.1」を入力すると「.1」になってしまいます。どのようにすれば正しく表示されるようになるのでしょうか。
- ベストアンサー
テンキーで「0.1」を打つと「.1」になる
HTMLページにテンキーを打つと数字が出るといったものをしたくて、検索しましたところ、参考サイトを見つけました。 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13197413368 「.」を追加したソースが下記になります。 「0.1」とテンキーを打つと「.1」になってしまいます。「0.1」になる方法を教えて下さいますか？ 宜しくお願いします。 <style type="text/css">table { border: 0px; margin: 0 auto; border-collapse: collapse; } div#cc { text-align: center; } input { font-size: 12px; margin: 0; padding: 0; } input.key { width: 32px; font-family: monospace; font-size: 12px; } </style> </head> <body> <div id="cc"> <form name="myForm" action="#"> <input name="tx1" size=24 tabindex=1 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx2" size=24 tabindex=2 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx3" size=24 tabindex=3 maxlength=20 value="" onClick="selecttext(this)"><br> <hr> <table> <tr> <td><input type="button" class="key" value="7" onClick="keyEvent('7')"></td> <td><input type="button" class="key" value="8" onClick="keyEvent('8')"></td> <td><input type="button" class="key" value="9" onClick="keyEvent('9')"></td> </tr> <tr> <td><input type="button" class="key" value="4" onClick="keyEvent('4')"></td> <td><input type="button" class="key" value="5" onClick="keyEvent('5')"></td> <td><input type="button" class="key" value="6" onClick="keyEvent('6')"></td> </tr> <tr> <td><input type="button" class="key" value="1" onClick="keyEvent('1')"></td> <td><input type="button" class="key" value="2" onClick="keyEvent('2')"></td> <td><input type="button" class="key" value="3" onClick="keyEvent('3')"></td> </tr> <tr> <td><input type="button" class="key" value="0" onClick="keyEvent('0')"></td> <td><input type="button" class="key" value="." onClick="keyEvent('.')"></td> <td><input type="button" class="key" value="←" onclick="oneClear()"></td> <td><input type="button" class="key" value="CA" onclick="allClear()"></td> </tr> </table> </form> </div> <script type="text/javascript"> var t; selecttext(document.myForm.tx1); function selecttext(o) { t = o; } function keyEvent(c) { t.value = (t.value=='0')? c: t.value+c; } function allClear() { t.value = ''; } function oneClear() { t.value = t.value.substring(0,t.value.length-1); } </script> </body>
- nkmyr
- お礼率67% (403/600)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
んー、先頭0が消えてしまう原因は、ここですね。 ＞function keyEvent(c) { ＞t.value = (t.value=='0')? c: t.value+c; ＞} 上記のハテナコロン演算子を普通にif文で書けば、こちらと同値となります。 if (t.value=='0') {t.value=c;} else {t.value=t.value+c;}; 現在入ってる文字が'0'のみであれば、置換する。そうでなければ、追加する。 これにより、「0012」と打っても「12」だけ出るようになっています。 同じ理屈で、「0.12」と打っても「.12」が残るというわけです。 この短い式で、先頭0を自動的に消す処理が入ってるんです。 なので、単純に解決するには、 ＞function keyEvent(c) { ＞t.value = t.value+c; ＞} としてしまえばいい。 0の時の上書きがなくなって、「0012」も「0.12」も、ついでに書くと、 「0000.12」とも入力できます。 でも↑これは「.12」より格好悪いのではないでしょうか? 数値的には、「0.12」も「.12」も0.12ですから、のちの処理に違いは生じないでしょう。 そのままで良い気がします。 まあもう一歩進めるとすると、 「『.』の時は無条件に加える。その他は今まで通り」 と考えると、次の式にもできます。 ＞function keyEvent(c) { ＞t.value = (c!='.' & t.value=='0')? c: t.value+c; ＞} これなら、「0000.12」と入力しても「0.12」だけ残ります。 でも他のボタンを足した時にここをどうするかまた考えないといけなさそうですね。 条件があまりに複雑になるようであれば普通にif文に展開しましょう。
関連するQ&A
- 電卓をつくったのですが
<script type="text/javascript"> <!-- var to=0; var inp=""; var cal="+"; var flg=1; function df(a){ flg=0; inp+=a; document.ad1.z.value= inp; } function df1(a){ if(flg==0){ flg=1; var don=to+cal+inp; to=eval(don); inp=""; document.ad1.z.value=to; } if(a=="="){ to=0; cal="+"; }else{ cal=a; } } function df3(){ to=0; cal="+"; inp=""; document.ad1.z.value=to; } --> </script> </head> <body> <div id="s1"> <div id="s2"> <form name="ad1"> <table> <tr><td colspan="4">電卓</td></tr> <tr><td colspan="3"><input type="text" size="12px" name="z" value="0"></td> <tr> <td><input type="button" name="ad7" value="7" onClick="df(7)"></td> <td><input type="button" name="ad8" value="8" onClick="df(8)"></td> <td><input type="button" name="ad9" value="9" onClick="df(9)"></td> </tr> <tr> <td><input type="button" name="ad6" value="6" onClick="df(6)"></td> <td><input type="button" name="ad5" value="5" onClick="df(5)"></td> <td><input type="button" name="ad4" value="4" onClick="df(4)"></td> </tr> <tr> <td><input type="button" name="ad3" value="3" onClick="df(3)"></td> <td><input type="button" name="ad2" value="2" onClick="df(2)"></td> <td><input type="button" name="ad11" value="1" onClick="df(1)"></td> </tr> <tr> <td><input type="button" name="add1" value="+" onClick="df1(+)"></td> <td><input type="button" name="add2" value="-" onClick="df1(-)"></td> <td><input type="button" name="add3" value="×" onClick="df1(*)"></td> </tr> <tr> <td><input type="button" name="add4" value="÷" onClick="df1(/)"></td> <td><input type="button" name="add5" value="=" onClick="df1(=)"></td> <td><input type="button" name="add6" value="." onClick="df1(.)"></td> <td><input type="button" name="add7" value="c" onClick="df3()"></td> </tr> </table> </form> </div> </div> </body> </html> クリアーは上手くいったんですが 計算ができませんでした。 どこがいけないのでしょうか？
- ベストアンサー
- JavaScript
- javascriptで電卓を作成
プログラミングをまったくやったことがない状態から、ドットインストールやテックアカデミーのHTML,CSS,Javascriptの入門動画をすべて見終わった段階ですので、 基本的な仕組みと関数やfor文、if文、while文、などについてくらいは理解しています。 今回、javascriptを使って電卓のシステムを組む、という課題があり、 ネットで検索してやってみてはいるのですが行き詰っています。 最初は以下のような形で作成をしていました。 <body> <form name="myform"> <table border="1"> <tr> <td colspan="4"> <input type="text" name="result" value="" id="result"> </td> </tr> <tr> <td><input type="button" value=" "onclick="calc(' ')" ></td> <td><input type="button" value="％"onclick="calc('%')"></td> <td colspan="2"> <input type="button" value="AC" onclick="calc('AC')"></td> </tr> <tr> <td><input type="button" value="７" onclick="calc('７')"></td> <td><input type="button" value="８" onclick="calc('８')"></td> <td><input type="button" value="９" onclick="calc('９')"></td> <td><input type="button" value="÷" onclick="calc('÷')"></td> </tr> <tr> <td><input type="button" value="４"onclick="calc('４')" ></td> <td><input type="button" value="５"onclick="calc('５')" ></td> <td><input type="button" value="６"onclick="calc('６')"></td> <td><input type="button" value="×" onclick="calc('×')"></td> </tr> <tr> <td><input type="button" value="１" onclick="calc('１')" ></td> <td><input type="button" value="２" onclick="calc('２')"></td> <td><input type="button" value="３" onclick="calc('３')"></td> <td><input type="button" value="－" onclick="calc('－')"></td> </tr> <tr> <td><input type="button" value="０" onclick="calc('０')" ></td> <td><input type="button" value="＋" onclick="calc('＋')"></td> <td colspan="2"> <input type="button" value="＝" onclick="calc('＝')"></td> </tr> </form> <script> function calc(a) { if (a === "=") { document.myform.kekka.value = eval(document.myform.kekka.value); } else if (a === "AC") { document.myform.kekka.value = ""; } else { document.myform.kekka.value += a; } </script> </body> </html> ですが、onclickとevalを使わず、代わりに「addEventListner」を用いるよう指示されました。 「addEventListner」に関しては、検索してなんとかざっと理解したのですが、それ以前に、電卓の基本的な関数の組み方を理解していないため、いまいちどこから手をつけたらいいかわかりません。 いろんなサイトを見ているといろんなやり方がでてきますが、ope=+,やflag=0などの表記をよく見かけます。が、この意味もいまいちわかっていません。。 初心者すぎるので、何かアドバイスをいただけますと幸いです。 宜しくお願いいたします。 また、このような初心者が使いこなせるようになるために向いている動画や書籍、ページがありましたら教えていただけますと助かります。
- 締切済み
- JavaScript
- テーブルの行削除について
以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>
- ベストアンサー
- JavaScript
- HTML・CSS ボタンの表示
<div class="item"> <tr> <td><input type="button" value="サンドウィッチ" onclick="get_calc(this)"></td> <td><input type="button" value="おにぎり" onclick="get_calc(this)"></td> <td><input type="button" value="お茶" onclick="get_calc(this)"></td> <td><input type="button" value="お弁当" onclick="get_calc(this)"></td> </tr> </div> ボタンを画面の50％の幅に均一の大きさで表示したです． CSSわかる方，教えてください！お願いします！
- ベストアンサー
- CSS
- <TD class=buttons rowSpan=2><INPUT
<TD class=buttons rowSpan=2><INPUT class="button carryOut section" tabIndex=3 onclick=gotoPageFromAA011(); value=ログイン type=button> IEで以上のようなボタンを押すVBSを教えてください。
- ベストアンサー
- Microsoft ASP
- jQueryでテーブル行の表示・非表示
JavaScript・jQueryでテーブル行(trタグ)の表示・非表示を 切り替えるスクリプトを以下のように作成しましたが うまく動きません。 dispChg()内で 非表示に設定したクラス名(hid)を追加し 全行を非表示にできていますが 次の該当trから 非表示に設定したクラス名(hid)の削除がうまくいかないようです。 JavaScriptの引数からクラス名を引き継げないのでしょうか。 どなたか修正できる方がいらっしゃいましたら 教えてください。 よろしくお願いいたします。 <html> <head> <title>test</title> <style type="text/css"> <!-- .hid { display:none } --> </style> <script src="jquery-1.2.6.pack.js" type="text/javascript"></script> <script type="text/javascript"> <!-- function dispChg(trClass){ /* まず全行を非表示 */ $('tr[class]').addClass('hid'); /* 該当の行を表示 */ $('tr[class*=trClass]').removeClass('hid'); } --> </script> </head> <body bgcolor=#ffffff topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"> <input type="button" value="全部表示" onclick="dispChg('atype btype ctype dtype')"> <input type="button" value="a" onclick="dispChg('atype')"> <input type="button" value="b" onclick="dispChg('btype')"> <input type="button" value="c" onclick="dispChg('ctype')"> <input type="button" value="d" onclick="dispChg('dtype')"> <table border="1"> <tr class="atype"><td>a</td></tr> <tr class="btype"><td>b</td></tr> <tr class="ctype"><td>c</td></tr> <tr class="dtype"><td>d</td></tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- 選択行だけ色を変更する場合のCSSの書き方
以下のHTMLで、どうすれば、選択行だけ青に変更できるでしょうか？ <table> <tr> <td class="lc"> <input type="button" value="色変更" onClick="選択行だけ青に変えたい"> </td> <td class="lc">赤</td> <td class="lc">赤</td> </tr> <tr> <td class="lc"> <input type="button" value="色変更" onClick="選択行だけ青に変えたい"> </td> <td class="lc">赤</td> <td class="lc">赤</td> </tr> </table>
- ベストアンサー
- HTML
- formのtextフィールドが認識されない
下記のようなフォームに対し、JavaScriptで処理を行おうとしています。 <form name="dateForm" method="post" action=""> <table> <tr><td>0</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111001'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>1</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111002'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>2</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111003'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> </table> <input type='text' name='date_0' maxlength='8' size=12 value='20111000'><br><br> <input type="submit" name="button" value="Check" onClick="send_self();"> <input type="submit" name="button" value="Enter" onClick="set_action();"> </form> Checkボタン押下で上記の関数を呼び出し、テキストフィールドdate[0]の値を表示すると、(1)では「20111001」と正しい値が表示されますが、(2)では下記のエラーが出てしまいます。 「プロパティ '0' の値を取得できません: オブジェクトは Null または未定義です。」 また、 alert(document.dateForm.elements[0]); // … (3) alert(document.dateForm.date); // … (4) とすると、(3)では[object]、(4)では[undefined]と表示されます。 alert(document.dateForm.date_0.value); はvalueも正しく表示されobjectとしても正しく認識されるので、配列へのアクセスに問題があるように思うのですが…。 問題点と解決法をご存知の方がいらっしゃいましたら、どうぞよろしくお願い致します。m(＿ ＿；)m
- ベストアンサー
- JavaScript
- onClickがinput type="image"だとできない！
以前、↓の質問をさせていただき解決したのですが、 input type="image" にしたいのですが、 ただ変更するだけでは、できません。 http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911 どのように変更したらいいでしょうか？ 教えてください！ 現在下記の方法でやっています。 <style type="text/css"> .white{ background-Color:white; color:black; } .gray{ background-Color:gray; color:yellow; } .blue{ background-Color:blue; color:red; } </style> <body> <form> 全体： <input type="button" value="White" onClick="document.body.className='white'"> <input type="button" value="Gray" onClick="document.body.className='gray'"> <input type="button" value="Blue" onClick="document.body.className='blue'"><br> テーブル1: <input type="button" value="White" onClick="document.getElementById('t1').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br> テーブル2: <input type="button" value="White" onClick="document.getElementById('t2').className='white'"> <input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'"> <input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br> </form> <table width=100% id="t1"> <tr><td>test</td></tr> </table> <table width=100% id="t2"> <tr><td>test</td></tr> </table> </body>
- ベストアンサー
- JavaScript
- buttonのVALUEが渡される条件
form内にINPUTタグでbuttonを複数設定するのですが、 buttonのVALUEがパラメタで渡される場合と渡されない場合があり、 悩んでいます。 一番いいのはどんな状況でもbuttonのVALUEが渡されない状態にしたいのですが、buttonのVALUEが渡される条件を教えていただけたらと思います。 今のソースでは、位置により渡される場合とそうでない場合に別れます。 下記ソースの場合ですと、８行目の「btn_a」のVALUE「ボタンＡ」がパラメタで渡されます。 しかし、１８行目の「INPUT TYPE="text"…」以降に設定すると渡されないのです。 この違いはなんでしょうか。 説明不足でしたら補足致します。 ご教授頂けると助かります。 1<FORM ACTION="xxxxxxx" METHOD="POST" NAME="form_1" onSubmit="return false"> 2 3-- 外側のテーブル 4<TABLE> 5 <TR> 6 <TD> 7 <div align="right"> 8 <INPUT TYPE="button" NAME="btn_a" VALUE="ボタンＡ" onClick="a_click();"> 9 </div> 10 </TD> 11 </TR> 12 <TR> 13 <TD> 14 -- 内側のテーブル 15 <TABLE> 16 <TR> 17 <TD>項目あ</TD> 18 <TD><INPUT TYPE="text" NAME="t_name" SIZE="80" MAXLENGTH="80"></TD> 19 </TR> 20 21 (中略) 22 </TABLE> 23 </TD> 24 </TR> 25</TABLE>
- 締切済み
- JavaScript
お礼
細かな説明をありがとうございます。 おかげさまでできました。