飞龙博客

妙法莲华经

如何用JavaScript往可编辑div区域某div光标处插入图片表情js代码

feilong.org 修订于2018-04-30 05:19:12 805 次浏览

如何用JavaScript往可编辑div区域某光标处插入图片表情?注意限定好范围,如果光标位置点击到不合适地方,不希望表情图片出现在那里。很尴尬。js代码
某div光标处插入图片表情js代码,飞龙js整理如下:飞龙提示: myField 是 js dom对象,不是jQuery对象。myvalue可以是文字也可以是图片。这正是表情图标所需要的。感谢万能的网络。有表情插件,可供学习。请联系飞龙。

//往可编辑div区域某光标处插入图片表情
function a0InsertAtDivCaret(mydiv, mycnt) {
    console.log("dom feilong.org=", mydiv);
    console.log("image or txt mycnt=", mycnt);
    //IE
    if (document.selection) {
        mydiv.focus();
        sel = document.selection.createRange();
        sel.text = mycnt;
        sel.select();
    } else if (mydiv.selectionStart || mydiv.selectionStart == "0") {
        var startPos = mydiv.selectionStart;
        var endPos = mydiv.selectionEnd;
        var restoreTop = mydiv.scrollTop;
        mydiv.innerHTML = mydiv.innerHTML.substring(0, startPos) 
		+ mycnt 
		+ mydiv.innerHTML.substring(endPos, mydiv.innerHTML.length);
        if (restoreTop > 0) {
            mydiv.scrollTop = restoreTop;
        }
        mydiv.focus();
        mydiv.selectionStart = startPos + mycnt.length;
        mydiv.selectionEnd = startPos + mycnt.length;
    } else {
        mydiv.innerHTML += mycnt;
        mydiv.focus();
    }
}/*0.5*/

更新网址:https://feilong.org/how-javascript-in-editable-div-cursor-insert-smile-face-images
最初发布:20180430 05:19:12 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文: