以下のはてなに回答頂いている内容で

もう少し、機能を足したいと思っています。
http://q.hatena.ne.jp/1296142068

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

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

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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2011/02/18 18:39:09
  • 終了:2011/02/23 15:38:42

回答(2件)

id:TransFreeBSD No.1

TransFreeBSD回答回数665ベストアンサー獲得回数2672011/02/18 20:05:35

ポイント35pt

<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使った方がシンプルに出来そうですが、とりあえず前の回答を継承しました。

id:hopefully

ありがとうございます。

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

2011/02/21 10:22:06
id:TransFreeBSD No.2

TransFreeBSD回答回数665ベストアンサー獲得回数2672011/02/22 22:22:31

ポイント35pt

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です。

id:hopefully

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

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

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

2011/02/23 15:38:34

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません