How to insert content in a cursor position in an editable div _javascript tips

This article describes the JS implementation of the editable div in the location of the insertion of the content of the method, as we use the editor, shared for everyone to reference. The implementation methods are as follows:

Let div enable edit mode first

Copy Code code as follows:

<div contenteditable=true id= "Divtest" ></div>

Open the div edit mode by setting the contenteditable=true so that the div can enter the same as the text box.
Don't talk about it. Let's say how to get or set the cursor position.

2 steps:

① gets the cursor position in the DIV
② Change cursor Position

Copy Code code as follows:

var cursor = 0; Cursor position
Document.onselectionchange = function () {
var range = Document.selection.createRange ();
var Srcele = range.parentelement ();//get to current element
var copy = Document.body.createTextRange ();
Copy.movetoelementtext (Srcele);
for (cursor = 0; copy.compareendpoints ("Starttostart", Range) < 0; cursor++) {
Copy.movestart ("character", 1)//changing the cursor position, we are actually recording the number of cursor.
}
}

Bind the document to a cursor change event. Used to record the position of the cursor.
So you can get the div cursor position.

Copy Code code as follows:

function MoveEnd (obj) {
Lytxt1.focus ();
var r = Document.selection.createRange ();
Because it's dead. Move from the current cursor (as if the text box is from 0.) So we need to get the current cursor position, and then we can figure out how many bits to move, so we can move the cursor to the desired position.
R.movestart (' character ', lytxt1.innertext.length-cursor);
R.collapse (TRUE);
R.select ();
}

With the above, we can move the cursor to the last side of the Div.
A complete instance of

Copy Code code as follows:

<button type= "button" onclick= "document.getElementById" (' Test '). focus (); Inserthtmlatcaret (' <b>INSERTED</b> '); " > Insert Character </button>
<div contenteditable= "true" style= "height:50px; border:2px solid red; "id=" Test > </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 to 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);
}
}

Let's look at a jquery based example

Copy Code code as follows:

<! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta content= "text/html; Charset=utf-8 "http-equiv=" Content-type ">
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></ Script>
<title>contenteditable</title>
<style>
*{
margin:0;padding:0;
}
. im-message-area{
width:98%;
padding:2px;
height:75px;
border: #000 solid 1px;
Background: #fff;
font:12px/20px Arial, "5b8b4f53";
Word-wrap:break-word;
Overflow-y:auto;
Line-height:1;
}
. Ul{display:none;}
. UL li{
Background-color: #CCC;
width:50px;
}
</style>
<script language= "javascript" type= "Text/javascript" >
function Inimage (text) {
var obj= $ (". Im-message-area") [0];
var range, node;
if (!obj.hasfocus) {
Obj.focus ();
}
if (window.getselection && window.getselection (). getrangeat) {
Range = Window.getselection (). Getrangeat (0);
Range.collapse (FALSE);
node = range.createcontextualfragment (text);
var c = node.lastchild;
Range.insertnode (node);
if (c) {
Range.setendafter (c);
Range.setstartafter (c)
}
var j = window.getselection ();
J.removeallranges ();
J.addrange (range);

else if (document.selection && document.selection.createRange) {
Document.selection.createRange (). pastehtml (text);
}
}
$ (document). Ready (function () {
$ (' #button '). Click (function () {
$ ('. UL '). Show ();
})
$ ('. UL Li '). each (function () {
$ (this). Click (function () {
Inimage ($ (this). text ());
})
})
});
</script>
<body>
<div contenteditable= "true" id= "Im_message_area" class= "Im-message-area" ><br></div>
<a href= "javascript:void (0)" id= "button" > button </a>
<ul class= "ul" >
<li> (laughter) </li>
<li> (crying) </li>
<li> (le) </li>
</ul>
</body>

I hope this article will help you with your JavaScript programming.