JS在可编辑的div中的光标位置插入内容的方法

本文实例讲述了js实现在可编辑div中指定位置插入内容的方法，就像我们使用的编辑器一样，分享给大家供大家参考。具体实现方法如下：

首先要让DIV启用编辑模式

代码如下:

通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。 不扯话题了。下面说怎么获取或设置光标位置.

2个步骤：

① 获取DIV中的光标位置 ② 改变光标位置

代码如下:

terange(); 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的光标位置了.

代码如下:

terange(); //因为这里死从当前光标开始移动的(好像文本框的是从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的实例

代码如下:

<Meta content="text/html; charset=utf-8" http-equiv="Content-Type">

(笑)
• (哭)
• (乐)

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

原文地址：https://www.jb51.cc/js/57263.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：js实现div弹出层的方法下一篇：JS中三目运算符和if else的区别分析