如何更改和跟蹤對文本區域的更改

我發現很難爲這個問題提出問題標題，所以我很抱歉它相當隱晦，但我會盡力在此解釋。如何更改和跟蹤對文本區域的更改

基本上，我正在開發的應用程序的一部分涉及將「佔位符」放在textarea中，然後修改textarea外部的佔位符。

例如：

This is the <first> placeholder. This is the <second> placeholder. 
This is the <first> placeholder again.

基本上我有JS，其檢測這些佔位符，並創建輸入框以保持文本。所以會有一個輸入文本框第一個和一個第二個。

我想實現的是當我在文本框中輸入一個值時，它將textarea中的佔位符更改爲輸入到文本框中的內容。想想崇高的文本編輯器的textarea的片段。

我想弄清楚如何跟蹤文本區域中的佔位符。例如，如果佔位符是<first_name>，我開始在佔位符文本框'Billy'中輸入內容。我可以通過使用字符串替換函數輕鬆更改佔位符。但是現在佔位符<first_name>不存在於textarea中，所以現在我不能回去改變它。我需要有一種方式來跟蹤這些佔位符，而他們正在改變。

我希望這是有道理的。

來源

2013-04-11 iamjonesy

請問您可以顯示一些代碼 – Dolo 2013-04-11 13:04:33

您是否必須使用'textarea'？ ''div'中的'span'元素會更容易！ – BenM 2013-04-11 13:04:38

@Dolours我還沒有任何好的。我試圖在寫任何 – iamjonesy 2013-04-11 13:09:57

如果您沒有綁定到<textarea>元素，您可以嘗試使用屬性爲contenteditable="true"的簡單div。這樣你可以使用一些<span>來標記所有的佔位符。

我設置了demo on jsfiddle，試試吧。

來源

2013-04-11 13:28:17 Uby

，謝謝這很好。（我不得不稍微改變代碼; v1的值被傳遞到v2中）。我完全忘記了contenteditable屬性！ – iamjonesy 2013-04-11 14:57:14

使用的元素與contenteditable="true"將是這項任務變得更容易，因爲你可以代表佔位符span元素，然後你就只有通過id或任何其他獨特attribute檢索他們更新的內容。

如果有使用textarea和用戶只能通過外部輸入修改它的內容，也許你可以開始跟蹤每個placeholers的index及其length，保留那些同步，值的變化。

然後您可以輕鬆替換textarea中的內容。例如，如果佔位符開始於15並具有13

var string = 'this is a test {placeholder} bla bla bla', 
     placeHolderIndex = 15, 
     placeHolderLength = 13; 

    string = 
     string.substring(0, placeHolderIndex) 
     + 'new value' 
     + string.substring(placeHolderIndex + placeHolderLength); 

//update indexes of every placeholders that comes after this 
//one and update the content length of this placeholder.

的長度顯然，你不想硬編碼的值，並且你將要處理這個過程以動態的方式，但是這只是一個例子。

注：我猜用戶可以修改textarea內容，如果你使用一個。在這種情況下，它會使事情變得更復雜一些，因爲您必須更新用戶所做的每個修改的佔位符的index，並且您還必須防止它們直接編輯佔位符映射文本。

來源

2013-04-11 13:11:33 plalx

如何更改和跟蹤對文本區域的更改

回答

相關問題