欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程语言 > php >内容正文

php

php光标添加,JS在可编辑的div中的光标位置插入内容的方法_javascript技巧

发布时间:2025/3/20 php 27 豆豆
生活随笔 收集整理的这篇文章主要介绍了 php光标添加,JS在可编辑的div中的光标位置插入内容的方法_javascript技巧 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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

首先要让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中的光标移动到最后面了

一个完整的实例

插入字符

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的实例

contenteditable

按钮

(笑)

(哭)

(乐)

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

本文原创发布php中文网,转载请注明出处,感谢您的尊重!

总结

以上是生活随笔为你收集整理的php光标添加,JS在可编辑的div中的光标位置插入内容的方法_javascript技巧的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。