檢測輸入文本中的更改（textarea）

我有一個用戶添加一些文本的textarea。提交textarea後，用戶會看到他或她輸入的文本，但它顯示了List中的每個單詞。檢測輸入文本中的更改（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中，但是這次我需要知道用戶是否刪除了或用戶刪除了什麼字詞，或者用戶是否在textarea的任何位置添加了一些單詞。總之，我需要跟蹤哪些div已經改變。或者，如果有任何東西已經添加到原始文本區域。所以用戶不需要重新選擇單詞。

比方說，原文是：

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

那麼也許用戶刪除或添加什麼東西該文本區域：

你好我的朋友。我今天很開心。

那麼我將如何獲得對原始字符串輸入的更改，仍然保持已被點擊的div？

來源

2012-06-23 Mads Christian Sidenius

這幾乎看起來像你需要做一個完整的* nix'diff'命令，但在JavaScript中。有一些快速和骯髒的解決方案，但他們將有注意事項，可能無法找到所有更改。 – Russ

我試過這一個http://aehlke.github.com/tag-it/，但我不能在元素（單詞）之間寫任何東西。所以我想我被卡住了。在這個問題上花費了大約兩週的時間：（ –

我建議維護一個包含所有單詞跟蹤鍵的單詞。然後在輸入空格或編輯完成後，檢查哪些單詞存在。點擊一個字的電話號碼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)

來源

2012-06-23 21:31:11 matt3141

這是否會工作？如果我有「我非常（點擊）快樂（點擊）」，並將其改爲「他非常高興（點擊）。空氣「？ –

請注意，這不是防彈的;例如，如果'WordArr'包含一個單詞兩次，並且一個已被刪除，'diff'函數將不會注意到。 – pimvdb

@MadsChristianSidenius我不明白你爲什麼需要看看是什麼改變了，而不僅僅是自動化選擇單詞的整個過程。發表更多的代碼，我相信有更好的方法。 – matt3141

檢測輸入文本中的更改（textarea）

回答

相關問題