Let div enable edit mode first
code is 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
The
code is 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);//change 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.
The
code is 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 to 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);
}
}
Let's look at a jquery based example
The
code is as follows: <! DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml" >
<head>
<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>
</head>
<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>
</html>
