Question

我有一个textarea，其中用户添加了一些文本。提交textarea后，将向用户显示他或她输入的文本，但它会显示列表中的每个单词。

<div id=0> "word0" </div>
<div id=1> "word1" </div>

现在，此页面还将每个单词存储在数组中：

WordArr[0] = word0;
WordArr[1] = word1;
...

现在用户可以点击每个单词和单击单词的WordArr变为 WordArr[0][0] = "clicked";

现在这一切都很好。用户现在可以使用php将文本保存在mysql数据库中。数据库还存储没有div代码的原始文本。

但用户也可以选择编辑文本。在这种情况下，我将原始文本加载到文本区域，但这次我需要知道用户是否删除了哪些单词，或者用户是否在textarea中的任何位置添加了一些单词。简而言之，我需要跟踪哪些div已被更改。或者，如果在原始文本区域中添加了任何内容。因此用户不需要再次重新选择单词。

我们说原文是：

你好我的jQuery朋友。我今天很开心。

然后用户可能会删除或添加一些东西到这个textarea：

你好，我的朋友。我今天很开心。

然后，如何更改输入的原始字符串，仍保留已单击的div？

Answer 1

我建议用一个用于跟踪所选单词的键的单词来维护一个对象。然后在输入空格或完成编辑时，检查存在哪些单词。点击一个单词后调用handleWordClick(word)，最后调用getFinal()以获取此类{word: "apple", clicked: true}之类的对象数组。

var words = [],
    clicks = {};

var checkWords = function() {    
     words = $(this).val().split(" ");
     $("#out").val(words.join(","));
};
//call this from whatever event a word click triggers
var handleWordClick = function(word) {
    clicks[word] = true;    
};
//to get all of your data, run this
var getFinal = function() {
    return words.map(function(word) {
        return {
            word: word,
            clicked: clicks[word]
        };
    });
}

$("#in").keydown(function(event) {
    //once they enter space, check what the words are
    if( event.keyCode == 32 ) {
        checkWords.call(this);
    }        
})
//when they're done editing, check what the words are
$("#in").blur(checkWords)

检测输入文本中的更改（textarea）

1 个答案: