飞龙博客

feilong.org 前端开发教程

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

飞龙更新于 2018-04-30 05:19 加入书签 CTRL+D 有 647 个朋友来过

如何用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*/

飞龙初发:
2018-04-30 05:19
本文更新网址:
https://feilong.org/how-javascript-in-editable-div-cursor-insert-smile-face-images

所在目录: 网站开发

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python