Javascriptで複数のTextに10キーを追加する方法は？

前へ 次へ
このQ&Aのポイント
  • Javascriptを使用して、複数のテキストフィールドに10キーを追加する方法について教えてください。
  • 現在、一部のテキストフィールドにのみ10キーが適用されており、他のフィールドには適用されていないようです。IDを変更してコーディングする必要があるのでしょうか？
  • metaタグには必要なJavaScriptファイルが指定されていますが、複数のテキストフィールドに10キーを追加するためには、IDやJavaScriptのコーディングに変更を加える必要がありますか？
回答を見る
  • ベストアンサー

Javascript　数か所のTextに１０キーを

ｓｃｒｉｐｔの超初心者です。以下のように記述して（サンプルを参照して）１か所の入力は可能になりましたが、同じページ上で他の部分はｓｃｒｉｐｔが聞いていないようなのですが、ＩＤなどを変えていくべきですか？つまり二か所目のIDに数字を加えて、scriptでの＃部分も数字を付け加える必要がありますか？ html <input type="text" width="4" height="3" name="sen17" value="" id="defaultKeypad"> script <script type="text/javascript"> $(function() { $('#defaultKeypad').keypad(); $('#viewKeypad').click(function() { alert('現在の入力値: ' + $('#defaultKeypad').val()); }); $('#removeKeypad').toggle(function() { $(this).text('Re-attach'); $('#defaultKeypad').keypad('destroy'); }, function() { $(this).text('Remove'); $('#defaultKeypad').keypad(); } ); }); metaには　<script type="text/javascript" src="jquery.keypad.js"></script> 必要なｊｓファイルは配置してあります 超基本的な質問で済みませんが、よろしくお願いします。

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

  • ベストアンサー
  • ok-rjak
  • ベストアンサー率52% (70/134)
回答No.1

> ＩＤなどを変えていくべきですか？ 変えていくべきというか、変えなければいけません。 IDは同一ページ上で同じものが複数存在してはいけません。 > id="defaultKeypad" > $('#defaultKeypad') ここを同じになるように設定してください。 例えば、 id="defaultKeypad1" $('#defaultKeypad1') 他にも、 > $('#viewKeypad') > $('#removeKeypad') というIDがあるようですので、それも変更する必要があると思います。

masarun53406
質問者

お礼

ありがとうございます、設置している箇所の数だけIDを替えなければならないんですね？やってみます。

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

関連するQ&A

  • javascriptファイルは１つに統合できますか

    javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。 ＜現状＞ <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか？ （単純に1箇所にコピー＆ペーストするようなイメージで） お手数ですが、ご教示のほど、宜しくお願い致します。

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

    以下のようにjavascriptの内容を書いた外部のテキストファイルを読み込んで、実行しようとしているのですが、うまくいきません。普通にjavascriptを読み込むのは分かっているのですが、このような方法ができないのでしょうか？よろしくお願いします。 <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <div id="jsbox"></div> <script type="text/javascript"> var jsbox = document.getElementById("jsbox"); //非同期通信///////////////////////////////////////////// var xmlHttp; loadText(); function loadText(){ if (window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ if (window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }else{ xmlHttp = null; } } xmlHttp.onreadystatechange = checkStatus; xmlHttp.open("GET", "http://xxxxxxxxxxxx/js_test.txt", true); xmlHttp.send(null); } function checkStatus(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var str = xmlHttp.responseText;alert(str); jsbox.innerHTML = str; test_js(); } } ///////////////////////////////////////////////////////////////// </script> </body> </html> テキストファイルをhttp://xxxxxxxxxxxx/js_test.txtに置き、テキストファイルの内容が <script type="text/javascript"> function test_js(){ alert("test"); } </script>

  • javascriptの中でjavascriptを呼びだしたいのです。

    javascriptで質問です。 javascriptの中でjavascriptを呼びだしたいのです。 実際にやるとエラーになりますが、方法はありますでしょうか。 xが１のとき、script1.js xが２のとき、script2.js のように実行を分けたいので、このような処理を したいのですが。 何卒よろしくお願いいたします。 <script type="text/javascript"> <script type='text/javascript' src='http://www.domain.com/script1.js'></script>"; </script>

  • JavaScriptのソースについて

    マウスでクリックすると画像やテキストがスライドするようなサイトを作りたいのですが、 JavaScriptのソースがうまく機能しません。 いろいろ調べたり、試したりしたのですが、解決しなかったのでご回答頂けれと思います。 <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.flow.1.2.min.js"></script> <script language="javascript" type="text/javascript"> <!-- $(document).ready(function(){ $("#myController_h").jFlow({ slides: ".loves_slide_h", controller: ".jFlowControl_h", // must be class, use . sign slideWrapper : "#jFlowSlide_h", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign width: "680px", height: "250px", duration: 400, prev: ".jFlowPrev_h", // must be class, use . sign next: ".jFlowNext_h" // must be class, use . sign }); }); //--> </script> ソースはこんな感じで作ってみたのですが、お分かりになる方がいらっしゃいましたらよろしくお願い致します。

  • 【javascript】２つ同時に上手く動かない

    javascript初心者です。 現在作成している画面に２つのjavascriptを動かしたいと思っております。 しかしながら、一つずつでは動くのですが、同時に表示すると上手く動作しません。 いい方法などありましたらご教授お願い致します。 【htmlのヘッド】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.coda-slider-2.0.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/sm_scroll.js"></script> <script type="text/javascript" src="js/jcaption.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('#coda-slider-1').codaSlider({ autoSlide:false, autoHeight:false, autoSlideStopWhenClicked:false, autoSlideInterval:10000, firstPanelToLoad:1, dynamicArrows: false, }); }); </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> 【上部のjavascript】 Coda-Slider 参照URL：http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/coda_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 【下部のjavascript】 litebox 参照URL：http://lokeshdhakar.com/projects/lightbox2/ javascript内が初期化されているのが問題なのでしょうか？ 解決の方法などありませんでしょうか？ 以上、宜しくお願い致します。

  • javascriptのクラスの処理について

    javascriptのクラスを利用した処理で分からない所がありますので 教えて下さい。 最初に 下記の「1.の方法」でhtml側にjavascriptを呼び出す記述を して動かしていましたが、「2.の方法」に変更しなければならなく なりました。 ところが、「2.の方法」でやりますと、メインのhtml側がフリーズ してしまいます。 調べてみますと、メモリーを食いつぶしていますので、何か永久ループの ような状態に陥っているようです。 こような場合、何かやり方がおかしいのでしょうか？ ご存知の方がいらっしゃいましたら、ご教授お願いいたします。 === 1.の方法 ===(問題なく動きます)================= ---ソース(index1.html) <script type="text/javascript" src="js1.js"></script> <script type="text/javascript"> hoge.create( abc, "def"); </script> ---ソース(js1.js) var hoge = { 　　xxx: ～～, 　　yyy: ～～ 　　create: function(val1,val2) { 　　　　～略～ }; === 2.の方法 ===(フリーズしてしまいます)=========== ---ソース(index2.html) <script type="text/javascript" src="js2.js"></script> <script type="text/javascript"> hoge_sub(); </script> ---ソース(js2.js) function hoge_sub(){ 　　hoge.create( abc, "def"); } var hoge = { 　　xxx: ～～, 　　yyy: ～～ 　　create: function(val1,val2) { 　　　　～略～ };

  • 複数のjavascriptを使うと動かなくなる

    下記にようにナビゲーションにljavascriptを使うと、ightboxを同じページに設置すると機能しません。 こういう場合どうすればいいでしょうか？ <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menu').children().hover(function() { //#menuの子要素にマウスオーバーした時の処理 $(this).siblings() //その要素の兄弟要素をすべて取ってきて .stop().fadeTo(500,0.5); //500ミリ秒かけて、opacity0.5まで変化させます }, function() { //マウスアウトの処理 $(this).siblings() .stop().fadeTo(500,1); //戻します }); }); </script>

  • [javascript] Dexagogoが動きません・・・。

    こんにちわ。 このたび、下記URLにあるjavascriptを作動させようと悪戦苦闘しております・・・。 Really easy field validation * Dexagogo http://tetlaw.id.au/view/javascript/really-easy-field-validation 入力確認を行なうスクリプトで具体的には以下のURLのような動作を致します。 http://tetlaw.id.au/upload/dev/validation/ が、しかし全く動いてくれません・・・。 原因特定のため、無駄なタグをどんどん削っていきましたが、依然動作せず・・。 参考までにソースを添付致します。 <html><title>入力チェック</title> <head> <script src="scriptaculous/lib/prototype.js" type="text/javascript"></script> <script src="scriptaculous/src/effects.js" type="text/javascript"></script> <script type="text/javascript" src="fabtabulous.js"></script> <script type="text/javascript" src="validation.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form action="#" method="get" id="test"> <br> <label for="field1">Name</label>:<input name="field1" id="field1" class="required" title="Enter your name" /> <br> <input type="submit"> </form> </body> </html> ご存知の方、お助けいただけると幸いです。

  • htmlTextで書き出したテキストからjavascriptへ

    flashCS4 AS3.0で作業しています。 htmlTextでダイナミックテキストに <a href="javascript:void(0)" onclick="hoge();">テスト１</a> と書き込んでます。 そのswfが貼付けてあるhtmlに書いてある <script type="text/javascript" language="javascript"> <!-- function hoge(){ window.alert('ボタンを押しましたね'); } // --> </script> を動かしたいのですがウマく行きません。 どなたかいい方法しっている方いませんか？

  • Javascriptで教えてください

    下記１だと実行できるのですが、２だと実行できないのはなぜでしょうか １ <script type="text/javascript"> function OnButtonClick() { alert('クリック'); } $(function () { }) </script> ２ <script type="text/javascript"> $(function () { function OnButtonClick() { alert('クリック'); } }) </script>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する