javascript - 将点击的单词添加到字符串

Question

我正在寻找一种在页面上单击时将特定单词添加到输入框中的字符串的方法。

目前我有一个解决方案，如下所示：http: //jsfiddle.net/BvP4n/

目前有两个问题，如果我能得到你的建议来改变它们，那就太好了：

1. 我需要<span>标签用一个标签覆盖整个文本，但是当单击时，只有已单击的特定单词会发送到单词字符串。

2. 我需要将单词作为表单的一部分放在输入框中，而不是<div>.

Answer 1

演示http://jsfiddle.net/BvP4n/7/

1. 不要在标记中包含跨度
2. 在空格上拆分初始文本并将每个单词放入一个单独的跨度
3. 更新您的target选择器以获取这些项目
4. 而不是将元素附加到 a<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);
    }
}());

Answer 2

1）使用搜索选项：

检测文本中点击了哪个单词

2）非常简单的代码更改：只需<input type="text" id="test"/>在 updateList 方法中添加和添加： document.getElementById("test").value = words.join(", ");请参见此处：http: //jsfiddle.net/BvP4n/