如何在特定位置添加/插入/更新contenteditable div中的文本？

的HTML代碼看起來像這樣如何在特定位置添加/插入/更新contenteditable div中的文本？

<div id="txtarea" contenteditable="true">Some text</div>

我在上面的DIV的特定位置插入基於某些事件的一些新的文本。事件調用函數say updateDiv（txt，positon）。比如它說
updateDiv("more ",5);

所以DIV應該成爲是

<div id="txtarea" contenteditable="true">Some more text</div>

我嘗試了大量的JavaScript和jQuery但沒有什麼似乎工作。

來源

2012-04-25 MeetM

http://stackoverflow.com/questions/1882890/jquery-insert-text-to- textarea – 2012-04-25 12:28:18

@ RokoC.Buljan：不，這個問題涉及到textareas，而不是'contenteditable'。 – 2012-04-25 12:38:41

**在另一個字符串的位置x插入字符串**：http://stackoverflow.com/questions/4364881/inserting-string-at-position-x-of-another-string – RASG 2012-04-25 13:20:56

我是這樣做的：

var position = 5, 
    txt = "more "; 
var current = $("#txtarea").html(); 
//alert(current.substring(0, position)) 
var endVal = current.substring(position); 
var newValue = current.substring(0, position) + txt + endVal; 
$("#txtarea").html(newValue);

jsfiddle '在行動' 顯示它。

編輯：使用上述註釋中列出的方法更新jsfiddle至this post。很漂亮！

來源

2012-04-25 12:31:01 veeTrain

但這會移動光標位置。它的'contenteditable' div – MeetM 2012-04-25 15:19:51

@MeetM;是的，清除div的'html（）'將移動光標位置。你從來沒有提到什麼事件正在產生需要插入文本。推測你必須嘗試綁定到鍵盤事件。但是，如果您在某人打字時將文本插入某些內容，他們可能不會喜歡它。 – veeTrain 2012-04-25 15:38:28

如果可編輯的<div>的內容總是由單個文本節點組成，則這個過程相對簡單，您可以使用下面的代碼。

var div = document.getElementById("txtarea"); 
var textNode = div.firstChild; 
textNode.data = textNode.data.slice(0, 5) + "more " + textNode.data.slice(5);

否則，你需要了解DOM Ranges（請注意，不是在IE < 9支持），並使用類似this answer創建內容中對應字符索引的範圍，然後使用insertNode()。

var div = document.getElementById("txtarea"); 
var range = createRangeFromCharacterIndices(div, 5, 5); 
range.insertNode(document.createTextNode("more "));

來源

2012-04-25 12:31:57

帶換行符的contentEditable div總是會有更多節點，形式爲
？怎麼可能有一個單一的文本節點？ – 2014-06-03 02:45:08

@RafaelDiaz：問題中的代碼有一個具有單個文本節點的可以理解的元素。一般來說，如果僅允許用戶編輯沒有格式的單個文本節點，那麼使用contenteditable的應用程序就不太可能用得上。 – 2014-06-03 09:05:30

使用此功能：

String.prototype.splice = function(position, newstring) { 
    return (this.slice(0,position) + newstring + this.slice(position)); 
};

，利用此功能爲：

var oldstr=$('#txtarea').html(); 
var newstr='more'; 
var position = 5; 
$('#txtarea').html(oldstr.splice(position , newstr);

來源

2012-04-25 13:51:31

如何在特定位置添加/插入/更新contenteditable div中的文本？

回答

相關問題