1

ページでクリックされたときに、入力ボックスの文字列に特定の単語を追加する方法を探しています。

現時点では、ここに表示されているソリューションがあります: http://jsfiddle.net/BvP4n/

現在、これには 2 つの問題があり、それらを変更するためのアドバイスをいただければ幸いです。

  1. <span>1 つのタグでテキスト全体をカバーするタグが必要ですが、クリックすると、クリックされた特定の単語のみが単語文字列に送信されます。

  2. ではなく、フォームの一部として入力ボックスに単語を配置する必要があります<div>。

4

2 に答える 2

1

デモhttp://jsfiddle.net/BvP4n/7/

  1. マークアップにスパンを含めないでください
  2. 最初のテキストをスペースで分割し、各単語を別々のスパンにします
  3. targetセレクターを更新してこれらのアイテムを取得します
  4. に要素を追加する代わりに<div/>、テキスト値を<input/>

更新された HTML

<p id="target_para">
   Here's an example of the thing you wanted to be made clickable.
</p>
<input type="text" id="display" />

更新された Javascript

(function () {
    "use strict";

    var para, targets, display, words, clickHandler, updateList, i, j, cur;

    display = document.getElementById("display");
    para = document.getElementById("target_para");

    // Wrap every word in a span element
    para.innerHTML = '<span>' + para.innerText.replace(/ /g, '</span><span>') + '</span>';

    // Updated target
    targets = para.getElementsByTagName("span");
    words = [];

    // Handler for clicking a clickable element
    clickHandler = function () {
        var text = this.innerText || this.textContent,
            idx = words.indexOf(text);

        if (words.indexOf(text) < 0) {
            // If not already in list, add it
            words.push(text);
        } else {
            // Otherwise remove it
            words.splice(idx, 1);
        }
        updateList();
    };

    // Update display of word list
    updateList = function () {
        while (display.firstChild) {
            display.removeChild(display.firstChild);
        }

        // Set the input box value
        display.value = words.join(", ");
    };

    // Bind event handlers to clickable elements
    for (i = 0, j = targets.length; i < j; i++) {
        cur = targets[i];
        cur.addEventListener("click", clickHandler, false);
    }
}());
于 2013-10-15T09:30:22.580 に答える