本文實例講述了js實現(xiàn)在可編輯div中指定位置插入內(nèi)容的方法，就像我們使用的編輯器一樣，分享給大家供大家參考。具體實現(xiàn)方法如下：

首先要讓DIV啟用編輯模式

通過設定contenteditable=true開啟div的編輯模式.這樣DIV就可以跟文本框一樣輸入內(nèi)容了。

不扯話題了。下面說怎么獲取或設置光標位置.

2個步驟：

① 獲取DIV中的光標位置

② 改變光標位置

var cursor = 0; // 光標位置

document.onselectionchange = function () {

var range = document.selection.createRange();

var srcele = range.parentElement();//獲取到當前元素

var copy = document.body.createTextRange();

copy.moveToElementText(srcele);

for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor++) {

copy.moveStart("character", 1);//改變光標位置，實際上我們是在記錄cursor的數(shù)量.

}

}

給document綁定光標變化事件。用來記錄光標位置.

這樣就可以拿到DIV的光標位置了.

function moveEnd(obj) {

lyTXT1.focus();

var r = document.selection.createRange();

//因為這里死從當前光標開始移動的(好像文本框的是從0算起.)所以我們需要拿到當前光標位置，然后就可以計算出要移動多少位了，這樣就可以把光標移動到想要的位置了

r.moveStart('character', lyTXT1.innerText.length - cursor);

r.collapse(true);

r.select();

}

通過上面的我們就可以將DIV中的光標移動到最后面了

一個完整的實例

插入字符

function insertHtmlAtCaret(html) {

var sel, range;

if (window.getSelection) {

// IE9 and non-IE

sel = window.getSelection();

if (sel.getRangeAt && sel.rangeCount) {

range = sel.getRangeAt(0);

range.deleteContents();

// Range.createContextualFragment() would be useful here but is

// non-standard and not supported in all browsers (IE9, for one)

var el = document.createElement("div");

el.innerHTML = html;

var frag = document.createDocumentFragment(), node, lastNode;

while ( (node = el.firstChild) ) {

lastNode = frag.appendChild(node);

}

range.insertNode(frag);

// Preserve the selection

if (lastNode) {

range = range.cloneRange();

range.setStartAfter(lastNode);

range.collapse(true);

sel.removeAllRanges();

sel.addRange(range);

}

}

} else if (document.selection && document.selection.type != "Control") {

// IE < 9

document.selection.createRange().pasteHTML(html);

}

}

再看一個基于jquery的實例

contenteditable

按鈕

(笑)

(哭)

(樂)

希望本文所述對大家的javascript程序設計有所幫助。

本文原創(chuàng)發(fā)布php中文網(wǎng)，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的php光标添加,JS在可编辑的div中的光标位置插入内容的方法_javascript技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。