6

HTMLコードは次のようになります

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

上記の div の特定の位置にあるイベントに基づいて、新しいテキストを挿入する必要があります。イベントは updateDiv(txt, position) という関数を呼び出します。たとえば、それは言う
updateDiv("more ",5);

したがって、divは次のようになります

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

私は多くのjavascriptとjqueryを試しましたが、何もうまくいかないようです。

4

3 に答える 3

3

これが私がそれをした方法です：

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をこの投稿に更新しました。かなり滑らか！

于 2012-04-25T12:31:01.287 に答える
3

editable のコンテンツが<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 ではサポートされていないことに注意してください)、この回答のようなものを使用して、コンテンツ内の文字インデックスに対応する範囲を作成し、使用する必要がありますinsertNode()。

var div = document.getElementById("txtarea");
var range = createRangeFromCharacterIndices(div, 5, 5);
range.insertNode(document.createTextNode("more "));
于 2012-04-25T12:31:57.903 に答える
0

この機能を使用します：

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-25T13:51:31.180 に答える