人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

以下のはてなに回答頂いている内容で
もう少し、機能を足したいと思っています。
http://q.hatena.ne.jp/1296142068

足したい機能は、一度選択した単語は
選んだ後、再度クリック出来なくして
削除ボタンみたいのが有効になるように
追加したいです。

削除ボタンを押したら、テキストに入力されている
単語が、消されて再度クリックできるようになる。

というような挙動をしたいのですが
皆様、お力を貸して下さい。

説明がうまくできてない場合が、申し訳ありません。

●質問者: hopefully
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:はてな クリック テキスト ボタン 入力
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● TransFreeBSD
●35ポイント

<html>
<head>
 <script type="text/javascript">
 <!--
 function action(a,i,t) {
 if (a.className == "normal") {
 var q = document.getElementById(i).value += t;
 a.className = "reverse";
 } else {
 var q = document.getElementById(i).value;
 document.getElementById(i).value = q.substr(0, q.lastIndexOf(t)) + q.substr(q.lastIndexOf(t)+t.length);
 a.className = "normal";
 }
 }
 //-->
 </script>
 <style>
 .normal>.delete {display: none}
 .reverse>.insert {display: none}
 </style>
</head>
<body>
 <a href="javascript:void(0)" class="normal" onclick="javascript:action(this, 't1', 'aaaa')">
 aaaaをテキストボックス<span class="insert">に追加</span><span class="delete">の削除</span></a><br />
 <a href="javascript:void(0)" class="normal" onclick="javascript:action(this, 't1', 'bbbb')">
 bbbbをテキストボックス<span class="insert">に追加</span><span class="delete">の削除</span></a><br />
 <a href="javascript:void(0)" class="normal" onclick="javascript:action(this, 'a1', 'xxxx')">
 xxxxをテキストエリア<span class="insert">に追加</span><span class="delete">の削除</span></a><br />
 <a href="javascript:void(0)" class="normal" onclick="javascript:action(this, 'a1', 'yyyy')">
 yyyyをテキストエリア<span class="insert">に追加</span><span class="delete">の削除</span></a><br />
 <form>
 <input type="text" id="t1" name="title" /><br />
 <textarea id="a1" name="body" cols="150" rows="10"></textarea><br />
 </form>
</body>
</html>

こんな感じでしょうか。jquery使った方がシンプルに出来そうですが、とりあえず前の回答を継承しました。

◎質問者からの返答

ありがとうございます。

ちなみにjqueryを使った場合はどのようになるのでしょうか?


2 ● TransFreeBSD
●35ポイント

jquery使って見ました。が、シンプルにならなかったので機能追加の方向で。

もっとなれた人ならもっとスマートに実装するかも。

<html>
<head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 <!--
 $(function(){
 $.each($(".normal"), function(){
 var dist = $("#"+$(this).attr("dist"));
 var addtext = $(this).attr("addtext");
 if (addtext === undefined) {
 addtext = $(this).find(".addtext").text();
 }
 $(this).toggle(function(){
 $(this).removeClass("normal").addClass("reverse");
 dist.val(dist.val() + addtext);
 }, function(){
 $(this).removeClass("reverse").addClass("normal");
 // dist.val(dist.val().replace(addtext, "")); // 前から削除
 // ↓後ろから削除
 var q = dist.val();
 var p = q.lastIndexOf(addtext);
 if (p >= 0) {
 dist.val(q.substr(0, p) + q.substr(p+addtext.length));
 }
 // ↑後ろから削除
 })
 });
 });
 //-->
 </script>
 <style>
 .normal .delete {display: none}
 .reverse .insert {display: none}
 </style>
</head>
<body>
 <a href="#" class="normal" dist="t1" addtext="aaaa">
 aaaaをテキストボックス<span class="insert">に追加</span><span class="delete">の削除</span></a><br />
 <a href="#" class="normal" dist="t1">
 <span class="addtext">bbbb</span>をテキストボックス<span class="insert">に追加</span><span class="delete">の削除</span></a><br />
 <p class="normal" dist="a1" addtext="xxxx">
 xxxxをテキストエリア<span class="insert">に追加</span><span class="delete">の削除</span></p>
 <p class="normal" dist="a1"><ins class="insert addtext">yyyy</ins><del class="delete">yyyy</del></p>
 <form>
 <input type="text" id="t1" name="title" /><br />
 <textarea id="a1" name="body" cols="150" rows="10"></textarea><br />
 </form>
</body>
</html>

追加先をdistで、追加するテキストをaddtextで指定します。addtextは"bbbb"の場合の様に指定することも出来ます。

また、これは前回のも同じですが、特にAタグを使う必要もなく、class指定さえしてあれば自由にデザイン出来ます。

あと、削除時の処理についてですが、一致する部分が複数あった場合、一番後ろを消しますが、前を消して良い場合は、

いまコメントアウトしてある所を有効にし、コメントではさまれている所を消せばOKです。

◎質問者からの返答

おおお、長くなりましたねw

でもありがとうございます。

いろいろ、お世話になりましたw

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ