JS method to insert content at the cursor position in editable div_javascript skills

The example in this article describes the js method of inserting content at a specified position in an editable div, just like the editor we use, and is shared with everyone for your reference. The specific implementation method is as follows:

First enable the DIV to edit mode

Copy code The code is as follows:

Turn on the edit mode of the div by setting contenteditable=true. In this way, the DIV can input content like a text box.
No more talking about the topic. Here’s how to get or set the cursor position.

2 steps:

① Get the cursor position in DIV
② Change cursor position

Copy code The code is as follows:

var cursor = 0; // Cursor position
document.onselectionchange = function () {
var range = document.selection.createRange();
var srcele = range.parentElement(); //Get the current element
var copy = document.body.createTextRange();
copy.moveToElementText(srcele);
for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor ) {
copy.moveStart("character", 1); //Change the cursor position. In fact, we are recording the number of cursors.
}
}

Bind the cursor change event to the document. Used to record the cursor position.
In this way, you can get the cursor position of the DIV.

Copy code The code is as follows:

function moveEnd(obj) {
lyTXT1.focus();
var r = document.selection.createRange();
//Because the movement here starts from the current cursor (it seems that the text box starts from 0.), so we need to get the current cursor position, and then we can calculate how many positions to move, so that we can move the cursor to The location you want
r.moveStart('character', lyTXT1.innerText.length - cursor);
r.collapse(true);
r.select();
}

Through the above we can move the cursor in the DIV to the end
A complete example

Copy code The code is as follows:

Insert character

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);
}
}

Look at another example based on jquery

Copy code The code is as follows:

 

 按钮
 

 
• (笑)

 
• (哭)

 
• (乐)

 

希望本文所述对大家的javascript程序设计有所帮助。