可编辑DIV 光标位置 处理
Posted 马三
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了可编辑DIV 光标位置 处理相关的知识,希望对你有一定的参考价值。
//场景: 要做一个网页即时通信,发送信息的文本编辑框 要求能发图片和表情,那么textarea就不能满足需求了,因为textarea内没有办法加入image
// 采用方案是使用可编辑的DIV(也就是 一般 DIV的 contenteditable 属性为 true)
// 但是发现添加表情或者插入图片之后,光标不会随着移动到末尾 图片和表情 采用的 append方式 添加的html结构
采用以下方法可以在输入图片和表情之后 使光标出现在最后 IE11 和 chrome浏览器 完全没问题
obj 传入的是 需要append图片的 DOM对象 ,text 传入的是 图片html结构
function inimage(obj,text){
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);
}
}
以上是关于可编辑DIV 光标位置 处理的主要内容,如果未能解决你的问题,请参考以下文章
各位帅哥,jQuery怎么获取可编辑div的光标的位置或者索引? 急急急 。。。。