| 标题 | JS在可编辑的div中的光标位置插入内容的方法 |
| 内容 | 首先要让DIV启用编辑模式 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。 不扯话题了。下面说怎么获取或设置光标位置. 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的数量. } } 给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中的光标移动到最后面了 一个完整的实例 复制代码 代码如下: <button type="button" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');">插入字符</button> <div contentEditable="true" 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 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的实例 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <script type="text/javascript" src="> <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"><br></div> <a href="javascript:void(0)" id="button">按钮</a> <ul> <li>(笑)</li> <li>(哭)</li> <li>(乐)</li> </ul> </body> </html> |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。