jQuery.jTagging.jsを使ったテキストエリアでの入力支援の実現可能性について
- jQuery.jTagging.jsを使ったテキストエリアでの入力支援は実現可能でしょうか？
- 現在、jQuery.jTagging.jsを使った入力支援をテキストエリアで実装したいのですが、問題が発生しています。
- 参考サイトのテキストボックスでは問題なく動作しますが、テキストエリアでは動作しません。実現する方法はありますか？
- ベストアンサー
jQuery.jTagging.jsを使った入力
現在、jQuery.jTagging.jsを使った入力支援を 以下のサイトを参考に作っています。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_other/jtagging.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 上記サイトの例のようにテキストボックスだと、問題なく動作するのですが テキストエリアにすると動作しません。 以下、上記サイトを基にして、テキストエリアでテストしたコードです。 <script type="text/javascript"> $(function() { $("#TagTextArea1").jTagging($("#TagDiv1"), ","); }); </script> ・ ・ ・ <h2>例1</h2> <p>your tags: <textarea id="TagTextArea1"></textarea> カンマ区切り</p> <div id="TagDiv1" class="box"> <a href="#" onclick="return false;">javascript</a> <a href="#" onclick="return false;">jquery</a> <a href="#" onclick="return false;">tag</a> <a href="#" onclick="return false;">cool</a> </div> jQuery.jTagging.jsを使用した入力支援は テキストエリアでは、実装することは不可能なのでしょうか？
- like-linux
- お礼率77% (28/36)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
「Query.jTagging.js」の素性がわかりませんが、 if文が間違ってます。 66行目の if (name != "input" || type != "text" && name != "textarea") に（）を加えて if ((name != "input" || type != "text") && name != "textarea") として下さい。 それから、何のためにあるのか解らんけど 153行目の do_update(input.id, input.value); もコメントアウトしとかないと、do_update()が無いから、いちいちエラーをはきます。 //do_update(input.id, input.value);
関連するQ&A
- javascript
現在、下記画面のような カテゴリー１をクリックすると、ポップアップ形式で 項目1 項目2 項目3 ・・・ カテゴリー２をクリックすると、同じくポップアップ表示で 項目A 項目B 項目C ・・・・ という文字列が表示され、例えばカテゴリ１の「項目1」をクリックすると テキストエリアに選択された「項目1」が追加されるというものを 以下のサイトを参考に作成しました。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_other/jtagging.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB ---------------------- カテゴリー１ カテゴリー２ ・ ・ ・ テキストエリア ---------------------- (1)しかし、このままだと、テキストエリアのカーソルがある位置にその文字を追加することができません。 (2)また、同じ項目を選択できません。 やりたいイメージは、以下のテキストエリアの状態のとき (1) あいう かきく ↑ カーソル位置 「項目1」を選択すると あいう項目1かきく となるようにしたい (2) あいう項目1 かきく項目1 どこをどのように改造すると上記２項目を実現できるのかがわかりません。 どなたか、お知恵を貸してください。 ソースコードは、以下の通り HTML ---------- <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jQuery.jTagging.js"></script> <script type="text/javascript"> $(function() { $("#TagTextArea1").jTagging($("#TagDiv1"), " "); }); $(function() { $("#TagTextArea1").jTagging($("#TagDiv2"), " "); }); </script> <!-- CSS --> <link href="drop.css" rel="stylesheet" type="text/css"/> </head> <body> <table> <tr> <td> <div id="items1"> <div class="format">カテゴリ１</div> <div class="foo"> <div id="TagDiv1" class="box"> <a href="#" onclick="return false;">項目1</a><br /> <a href="#" onclick="return false;">項目2</a><br /> <a href="#" onclick="return false;">項目3</a><br /> <a href="#" onclick="return false;">項目4</a><br /> <a href="#" onclick="return false;">項目5</a><br /> <a href="#" onclick="return false;">項目6</a><br /> <a href="#" onclick="return false;">項目7</a> </div> </div> </td> <td> <div id="items2"> <div class="format">カテゴリ２</div> <div class="foo"> <div id="TagDiv2" class="box"> <a href="#" onclick="return false;">項目A</a><br /> <a href="#" onclick="return false;">項目B</a><br /> <a href="#" onclick="return false;">項目C</a> </div> </div> </div> </td> </tr> </table> <p>選択内容:</p> <p><textarea id="TagTextArea1" cols="40" rows="6"></textarea></p> </body> </html>
- ベストアンサー
- JavaScript
- jQuery.lightpop.jsの動作について
jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。 現在弊社ではjQuery.lightpop.jsライブラリを使用して リンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。 以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず 普通にページ遷移してしまいます。原因はどこにあるのでしょうか？？ ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryのイベントに引数を渡したい
例えば以下のような既存のJavaScriptのコードをjQueryのイベントで書き直したい場合、関数の引数で渡していた値は、どうやって渡すのでしょうか？ 【html】 <a href="" onclick="func_a('abc'); return false;"></a> 【JavaScript】 faunction func_a(param_a){ alert(param_a); } 以下のようにすれば渡せないことはありませんが、かなり強引な感じがします。 【html】 <a href="" class="abc"></a> 【jQuery】 $(function() { $("a").click( function(){ var param = $(this).attr("class"); alert(param); return false; } ); }); こういう場合はjQeuryであっても、onclick属性で関数を呼び出すのが普通なのでしょうか？ ご存知の方がいらっしゃいましたら教えてください。 よろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- jQueryについて教えてください
http://www.skuare.net/test/jFloatingmenu.html こちらのサイトを参考に製作をしたのですが <div id="floatMenu"> <ul> <li><a href="#" onclick="return false;">メニュー1</a></li> <li><a href="#" onclick="return false;">メニュー2</a></li> </ul> </div> こちらの部分をテキスト表示だと表示されるのですが メニューを画像（CSSを使ったロールオーバー）にすると 点線のみ表示され、画像が表示されなくなります。 <ul> <li class="category1_1"><a href="#" target="_parent">メニュー1</a></li> <li class="category1_2"><a href="#" target="_parent">メニュー2</a></li> </ul> 原因がわかりません 教えていただけませんでしょうか？
- ベストアンサー
- JavaScript
- jQuery.jsを使ったhtml外部読み込み
教えてください。 現在Jqueryを使用して外部htmlを読み込ませようとしていますが、 うまくいきません・・・ ■本体html <head> <script src="js/jquery-1.8.3.min.js"></script> </head> <body> <script type="text/javascript" src="sample.js"></scrip> <div id="sample"></div> </body> ■sample.js // JavaScript Document $(function(){ $("#sample").load("sample.html"); }); ■読み込ませるsample.html 特に設定なし このような感じですが、全然読み込めません。。。 javascriptを外部リンクにしているのは、読み込むhtmlが複数ある為、 headの見栄えが悪くなるからという個人的な意見です・・・ 済みませんがお知恵をお貸しください！！
- 締切済み
- JavaScript
- 【ｊｓ】attrで属性を取得するとき・・・
js初心者です。 div全体をクリックしてリンクできるようにしたいと思い、下記ソースを書いています。 （js） <script type="text/javascript"> $(function(){ $(".go_content").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); }); </script> （html） <div class="go_content"> テキストが入りますテキストが入ります。 <a href="http://xxxxxxx" target="_top" ></a> </div> これで、通常なら思ったとおりに動作してくれます。 しかし、このソースはあるページのなかにiframeで表示させます。 なので、<a>にtarget="_top"を指定しています。 上記スクリプトのままだと、aのhref属性しか取得できずに、フレーム内でリンクしてしまいます。 一緒にtarget属性も取得するにはどうすればよいのでしょうか？ 何か良い方法があれば教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- リンクにおける挙動の参照と範囲指定
ほぼ初心者です。 html内に、javascriptを参照させて、以下のように作成しました。 <SCRIPT language="javascript"src="popup.js"></script> <□□> <a href="1.jpg" onclick="popup(href);return false;">テスト1</a> <a href="2.jpg" onclick="popup(href);return false;">テスト2</a> <a href="3.jpg" onclick="popup(href);return false;">テスト3</a> </□□> 普通にポップアップされたのですが、以下の方法ができないかと思っております。 (1)「onclick="popup(href);return false;"」の部分をほかから参照させる (2)特定の範囲のリンクのみ「onclick="popup(href);return false;"」を適用させる。 (1)はLightboxのように、「rel="thumbnail"」みたいに参照できないか、ということです。 (2)は上の「<□□>～</□□>」のように囲われた範囲のリンクで、「onclick="popup(href);return false;"」を適用できないか、ということです。 よろしくお願いします。
- 締切済み
- JavaScript
- jQueryでクリックされた要素のidを関数で取得
以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。 関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。 [htmlソース] <a class='alphabet' id='a' href='' onclick="return false;">A</a> <a class='alphabet' id='b' href='' onclick="return false;">B</a> <a class='alphabet' id='c' href='' onclick="return false;">C</a> <script src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('.alphabet').click(function(){ function alertAlphabet(){ alert($(this).attr('id')); }; alertAlphabet(); }); }); </script>
- ベストアンサー
- JavaScript
- jQueryタブメニュー内、パネル間のリンク方法。
javascript勉強中です。 立て続けに質問してしまい、ご迷惑おかけしておりますが協力していただければ幸いです。 下記のjQueryタブメニューですが、パネル内から他のパネルへのリンクを実装するには、どのように書いたらいいか教えていただけないでしょうか。例としてtest1のリンクからtab2へ行くように、です。 （下記実装されている機能は、タブメニューと他のページからのタブへのダイレクトリンクです。） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ $(".area").hide(); var tabs = $(".tab01 li"); tabs.click(function(){ var i = tabs.removeClass("active").index(this); tabs.eq(i).addClass("active"); $(".content .area").hide().eq(i).fadeIn(400); return false; }); var hash = window.location.hash.match(/#tab(\d+)/); hash = hash?(tabs.eq(hash[1]-1).length?hash[1]-1:0):0; tabs.eq(hash).click(); }); </script> </head> <body> <div id="tabs"> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1"><a href="#tab2">test1</a></div> <div class="area" id="tab2">test2</div> <div class="area" id="tab3">test3</div> </div> </div> </body> </html> 何卒宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
お礼
教えていただいた通りに修正したところ 無事、テキストエリアでも動作するようになりました。 JavaScriptはあまり詳しくないので助かりました。 ありがとうございました。