- ベストアンサー
フォームで入力時自動で次の項目に移るプラグイン
kura07の回答
- kura07
- ベストアンサー率50% (30/59)
そんなに難しくないスクリプトだと思いますけど？ prototype.js使わなくてもできそうな気がします。 （もっとも、prototype.jsを使えばスクリプトが短くなるとは思いますが） onkeyupで関数を呼び出して、指定文字数入力されていたら次のフォームを.focus()する。 数字しか入力できないフォームは正規表現とかでチェックする。 …という感じでしょうか。
関連するQ&A
- prototype.jsとjquery.jsの併用がうまくいきません。
prototype.jsとjquery.jsの併用がうまくいきません。 2つの機能をページに組み込みたいと思っています。 (1)横並びの画像が自動的にスクロールする (2)画像をクリックすると、ライトボックスで表示する 参考にしたのは下記のサイトです。 http://logicbox.net/jquery/simplyscroll/ http://www.lokeshdhakar.com/projects/lightbox2/ しかし、実際にページを作ってみるとどちらかの機能しか有効になりません。 どちらもいくつかのjsファイルを<script>タグで読み込みますが、 後から読み込んだ方しか有効に機能しないのです。 スクロールの方はjquery.jsを、ライトボックスの方はprototype.jsを使っているのですが、 それが良くないのでしょうか。 両方を機能させるにはどう直したらいいのか、ご教授下さい。 もしくは、両方がうまく機能しているサイトがあれば、URLを教えて下さい。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptライブラリの使い方
aa.js bb.js cc.js の3つのjavascriptを使ったサイトを作成中です。 ヘッダーに <script src="aa.js" type="text/javascript"></script> <script src="bb.js" type="text/javascript"></script> <script src="cc.js" type="text/javascript"></script> と記載し、「aa.js bb.js cc.js 使う前提のスクリプト」をサイト上に記載しているのですが、aa.js bb.js cc.js のそれぞれが重いため、サイト記載のスクリプトがaa.js、bb.js、cc.jsより先に読み込まれてしまい、思ったような表示が出来ません。 (cc.jsが読み込まれないままの状態でサイトのスクリプトを読み終わってしまう) そこで調べてみると、下記のようなライブラリを発見しました。 http://notnil-creative.com/blog/archives/1361 このライブラリ(script.js)を使うと、通常は以下のように書くJavascriptの読み込みが、 <script src="jquery.js"></script> <script src="my-jquery-plugin.js"></script> <script src="my-app-that-uses-plugin.js"></script> 下記のように書くことができるそうです。 $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) この書き方で、ページのレンダリングを阻害せず、非同期にJavascriptを読み込むことができ、なおかつ「jQueryが読み込まれてからjQueryプラグインを読み込み、そのあとウェブサイト用のスクリプトを読み込む」というような依存関係のある複数のJavascriptファイルの読み込みにも対応できちゃいます。 という優れものであり、私の要求にぴったりと思いました。 早速、http://notnil-creative.com/blog/archives/1361のページからscript.jsをダウンロードしたのですが、使い方がわかりません。 例ではヘッダーに $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) と記載すればOKと書いてあります。 ただ、この記入方法で動くようにするためには、$scriptがscript.jsに連動していることを記載すべき だと思いますが、javascriptでそのような例を見たことがなく困惑しています。 このスクリプトの使い方(ヘッダーの記入方法)について、ご教授頂けませんでしょうか? 宜しくお願い致します。
- 締切済み
- JavaScript
- jQuery版のlightbox.jsのカスタマイズについて質問です。
jQuery版のlightbox.jsのカスタマイズについて質問です。 やりたいことは下記の2点です。 1.「prev」や「next」をhover時ではなく絶えず出ているようにする。 2.任意でグルーピングをする。 使用したjQuery版lightbox.jsは下記のサイトからダウンロードしました。 jQuery lightBox plugin http://leandrovieira.com/projects/jquery/lightbox/ JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら 教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- prototype.jsはJSのラッパなのですか？
prototype.jsはJavaScriptのラッパといってもよいのでしょうか？ また、jQueryはJSのラッパなのでしょうか？ ラッパの概念がどうにも理解できず、困っています。教えてください。
- 締切済み
- JavaScript
- Jquery を使った住所情報の自動入力
PHPにて会員情報入力フォームを作っています。 住所情報は、Jqueryを使い、入力された郵便番号から自動的に補完させようとしています。 ・http://tabtab.egoism.jp/blog/2011/02/21/jquery-zip2addr%E3%81%A7%E9... ・http://blog.eggrice.com/?p=25 ＝＞jquery.zip2addr.js を使用する例はいくつか見つけました。 DBには、日本郵便のサイトから取得した KEN_ALL.CSV を登録済です。 DBから取得して、自動補完を実現する方法が分かりません。 Jqeryはど素人なので、参考になるようなサイト（DBから取得する）、もしくは方法をご存知の方がおりましたら、どなたかご教示頂けないでしょうか？
- 締切済み
- JavaScript
- jQuery Cycle Pluginについて
jQuery Cycle Plugin（http://jquery.malsup.com/cycle/）を使用して、8枚の画像を次々と表示するスライドショーを実装しました。 1枚目から7枚目の間は「Skip」ボタンを表示してクリックしたら、最後の画像が表示されてスライドが停止するといったような動きは、jQuery Cycle Pluginで実現することは可能でしょうか。 知っている方がいらっしゃいましたら何かヒントを頂けませんでしょうか。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- jqueryのプラグインのjquery.jcarousel.jsについ
jqueryのプラグインのjquery.jcarousel.jsについて http://sorgalla.com/projects/jcarousel/examples/static_auto.html jquery.jcarousel.jsはデフォルトで<ul>の中の<li>要素をスライドさせていますが、 これを<div>の中の<dl>に変更できればと考えております。 なんどいじってみてもエラーで停止してしまいます。 どなたかご教授ください。
- ベストアンサー
- AJAX
- jqueryのバージョン違いの解決方法は？
どうしてもわからないので、ご教授お願いいたします。 http://baby.caregoods.org/のサイトでjquery.treeview.js（http://bassistance.de/jquery-plugins/jquery-plugin-treeview/）のツリーメニューを使っています。 同梱されていたjquery1.4.3を使っていました。 ところが、このサイトの管理画面で画像のドラッグ＆ドロップで入れ替えるという機能が使えなくなり、元のjquery1.6.2に戻したところjquery.treeview.jsのメニューが使えなくなってしまいました。(いろいろなpluginが入っているようです。) 複数のjqueryが使えないのはここで調べてわかったのですが、http://stacktrace.jp/jquery/with_other_lib.htmlのサイトを参考にして ----------------- // $ 関数および jQuery関数の上書きを元に戻します。 var $j = jQuery.noConflict(true); // $ は jQuery ver1.4.3を参照します。 alert($.fn.jquery); // => 1.4.3 // jQuery は jQuery ver1.4.3を参照します。 alert(jQuery.fn.jquery); // => 1.4.3 // $j は jQuery ver1.6.2を参照します。 alert($j.fn.jquery); // => 1.6.2 ---------------------------- と書いたjsファイルを読み込むのですが、1.6.2しか反映されず、1.4.3で使っているjquery.treeview.jsが使えません。 このjsファイルの前に、jquery-1.4.3.jsとjquery-1.6.2.jsは呼び出してあります。 firefoxで閲覧すると「1.6.2」「1.6.2 このページによる追加のダイアログ表示を抑止する」「1.4.3 このページによる追加のダイアログ表示を抑止する」と書いたポップアップが３度ほど出るようになりました。 こういう状況なのですがどうにか一緒に使える方法はないでしょうか？ javascriptは初心者なので説明があまり上手くないので申し訳ありません。 うまく伝わるかわかりませんが、よろしくお願いいたします。
- 締切済み
- JavaScript
- jQueryとprototypeの共存
prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>
- ベストアンサー
- JavaScript
- ｊQueryのvar jQueryの仕組みについて
jQuery-1.6.2のソースコードを見ているのですが質問させてください。 ２5行目の var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }, そして100行めの jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { の意味が分かりません。 PHP等のclassになれているとJSのクラスは戸惑うことが多いのですが、この例は最たるもので、自分の中のJSでのclassは (1)スーパークラスのプロパティをcall()、apply()で継承 (2)スーパークラスのメソッドをprototypeオブジェクトで継承 (3)インスタンスのデータ型判定に必要なプロパティをconstructorで調整 だったのですが、スーパークラスがどの行のどれなのかも分かりません。 型やメソッド名からこれらがclassを意味しているのは分かるのですが、いったいどの部分がclass定義、継承を行っているのか教えていただけませんでしょうか？ なぜこれらがclassになっているのかが理解できません。 分るのは、jQuery.prototype.constructor = jQueryで、それをjQuery.fnに代入((3))している事です。 329行目の、jQuery.fn.init.prototype = jQuery.fn;の右辺がnew {$class}の形であれば(2)のプロトタイプチェーンの形だと分るのですが。 (1)は、init内でメンバ変数を定義したりしているので、classなのかな、という程度しか分っておりません。 jQuery.fnがコンストラクタで、jQueryがインスタンスで、var jQueryは親クラスをinitしたもの？・・・と混乱しております。 質問内容も文章が混乱していて申し訳ないです。
- ベストアンサー
- JavaScript
お礼
早速ありがとうございます。 でも難しいです。
補足
<script type='text/javascript'> var target = new Array('former','latter','address'); var focus = new Array(3,4); function next(n){ if(document.getElementById){ var f = document.getElementById(target[n]).value; if(f.length < focus[n]){ return true; } document.getElementById(target[n]).blur(); document.getElementById(target[n+1]).focus(); } } </script> ///------------------////// <form> Zip-code：<input type='text' size='3' id='former' onkeyup='next(0);' maxlength='3' /> - <input type='text' size='4' id='latter' onkeyup='next(1);' maxlength='4' /><br /> Address：<input type='text' id='address' size='20' /> </form> こんなのを紹介してるサイトがありましたが、 prototype.jsを併用すると動作しません。 prototype.jsは、違う目的で必須ですので、外せないのです。 この郵便番号部分だけ、自動移動のタブにしたいのです。 よろしくお願いします。