可编辑div在光标位置插入指定内容

//在光标位置插入内容
insertContent(content) {
    if (!content) {//如果插入的内容为空则返回
        return;
    }
    let sel = null;
    if (document.selection) {//IE9以下
        sel = document.selection;
        sel.createRange().pasteHTML(content);
    } else {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            let range = sel.getRangeAt(0);      //获取选择范围
            range.deleteContents();             //删除选中的内容
            let el = document.createElement("div"); //创建一个空的div外壳 
            el.innerHTML = content;                 //设置div内容为我们想要插入的内容。
            let frag = document.createDocumentFragment();//创建一个空白的文档片段，便于之后插入dom树

            let node = el.firstChild;
            let lastNode = frag.appendChild(node);
            range.insertNode(frag);                 //设置选择范围的内容为插入的内容
            let contentRange = range.cloneRange();  //克隆选区
            contentRange.setStartAfter(lastNode);          //设置光标位置为插入内容的末尾
            contentRange.collapse(true);                   //移动光标位置到末尾
            sel.removeAllRanges();                  //移出所有选区
            sel.addRange(contentRange);             //添加修改后的选区
        }
    }
}

需注意：在谷歌浏览器下测试发现:

document.execCommand("inserHTML", "false", '<p><img src="./test.png" /></p>);

当使用这种方式插入html内容时，p标签不见了，只有img标签存在。但是如果单独插入一个p标签时，p标签又存在。故经多次测试发现inserHTML方式只适合插入单个标签，复合标签插入时则解析错乱。

使用方式

 let imgTag = `<p><img src=${eidtorImg.src} /></p>`;
 this.insertContent(imgTag);
 //content内容为html字符串。

点击客户名称输入内容 ，触发post请求向后台请求数据（模糊查询）。然后将请求后的数据 生成一个div 在该输入框下方显示出来。下面是具体实现方法；
js：
创建请求

//创建请求
function createXMLHttpRequest() {
    xmlHttp = false;
    if (window.XMLHttpRequest) {        //for Mozilla
        xmlHttp = new XMLHttpRequest();
        if (xmlHttp.overrideMimeType) {
            xmlHttp.overrideMimeType("text/xml");
        }
    }
    else if (window.ActiveXObject) {   //for IE
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }
    }

    if (xmlHttp == undefined || xmlHttp == null) {
        alert("XMLHttpRequest对象创建失败！！");
    } else {
        this.xmlhttp = xmlHttp;
    }
}

获取查询结果(输入框里的内容,每隔500ms 提交一次)

function getSearchResult(queryurl, tbname, hfnameid, iflag, btngetinfo, event) {
    txtname = tbname;
    txtnameid = hfnameid;
    btntgetinfo = btngetinfo;
    runcount = runcount + 1;
    var tempscreen = screenval;
    screenval = escape($(txtname).value);
    var tempcount = runcount; //过滤500毫秒内的重复提交,重复不提交，空值不提交
    setTimeout(function () {
        if (event.keyCode != 38 && event.keyCode != 40 && event.keyCode != 32 && event.keyCode != 9 && event.keyCode != 13 && (tempcount == runcount && tempscreen != screenval && screenval.length > 0 && runcount != 1)) {
            runcount = 0;   //允许提交后重置运行标识
            createXMLHttpRequest(); //初始化XMLHttpRequest对象
            if (!xmlHttp) {
                window.alert("Cannot create XMLHttpRequest instance!");
                return false;
            }
            var parmurl = "keydata=" + escape($(txtname).value);    //创建请求的URL
            if (iflag == 1) { parmurl += "&f=1"; }
            xmlHttp.onreadystatechange = callback;      //设置处理响应的回调函数
            xmlHttp.open("POST", queryurl, true);        //打开与服务器的连接，使用post方式            
            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); //post需要设置请求表头            
            xmlHttp.send(parmurl);  //发送请求并设置参数，参数的设置为param=value的形式
        }
        else {            
            //alert(tempcount + "," + runcount + "," + tempscreen + "," + screenval + "," + screenval.length);
        }
    }, 500)
    if (screenval.length < 1) {
        MoveDivTableBlur();
    }
}

回调函数 返回查询的信息

//返回查询信息
function callback() {
    //响应完成且响应正常
    //  if(objXMLHttp.readyState == 1){
    //      alert("XMLHttpRequest对象开始发送请求");
    //  }else if(objXMLHttp.readyState == 2){
    //      alert("XMLHttpRequest对象的请求发送完成");
    //  }else if(objXMLHttp.readyState == 3){
    //      alert("XMLHttpRequest对象开始读取服务器的响应");
    //  }else if(objXMLHttp.readyState == 4){
    //      alert("XMLHttpRequest对象读取服务器响应结束");
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            //信息已经成功返回，开始处理信息
            //返回信息为空
            if (xmlHttp.responseText.trim() == "") {
            //如果已存在id为contents的div 则移除然后重新生成
                if ($("contents"))
              document.body.removeChild(divtable);
            }
            else {
                createTable(xmlHttp.responseText);
                
            }
        } else {
            window.alert("未知错误！");
            return false;
        }
    }
}

创建装在返回结果的载体DIV

function createTable(strtable, divheight,obj,e) {
    if ($("contents"))
        document.body.removeChild(divtable);
    divtable = window.document.createElement("div");
    divtable.setAttribute("id", "contents");
     divtable.setAttribute("class", "tbData");
    divtable.style.position = "absolute";
    divtable.innerHTML = "";
    var strcon = "<iframe style=\"position: absolute;z-index: 2;height:0px;width:0px;\" frameborder=\"0\"></iframe>";
    divtable.innerHTML = strcon + strtable;
    divtable.zIndex = "100";
    divtable.style.zIndex = "800";
    divtable.style.overflow = "auto";
    divtable.style.height = "235px";
    divtable.style.width = "430px";
   var opt = $(txtname).offsetParent;
   var oft = $(txtname).offsetTop;
   var ofh = $(txtname).offsetHeight;
   var ofl = $(txtname).offsetLeft;
 
 	divtable.style.top = oft + ofh + "px";
    divtable.style.left = ofl + "px";

    document.body.appendChild(divtable);
}

屏蔽几个特殊键盘按键

document.onkeydown = function (e) {
    if (document.getElementById("gvice")) {
        e = window.event || e;
        switch (e.keyCode) {
            case 38:
                // 上方向键
                currentLine--;
                changeItem();
                break;
            case 40:
                // 下方向键
                currentLine++;
                changeItem();
                break;
                // Backspace
            case 32:
                MoveDivTable();
                break;
                // Tab
            case 9:
                MoveDivTable();
                // Enter
            case 13:
                MoveDivTable();
                break;
            default:
                break;
        }
    }
}

选中后为文本框赋值

// 选择行
function changeItem() {
    var it = document.getElementById("gvice");
    for (var j = 0; j < it.rows.length; j++) {
        it.rows[j].className = "bsltrowc";
    }
    if (currentLine < 0) {
        currentLine = it.rows.length - 1;
    }
    if (currentLine == it.rows.length) {
        currentLine = 0;
    }
    if (it.rows.length == 1) {
        currentLine = 0;
    }

    if (it.rows[currentLine]) {
        it.rows[currentLine].className = "sltrowc";
        $(txtnameid).value = it.rows[currentLine].id;
        $(txtname).value = it.rows[currentLine].cells[1].innerHTML.split('-')[0];
    }
}
//单击取值
function clickItem(clicktLine) {
    if (document.all) {
        var it = document.getElementById("gvice").children[0];
    }
    else {
        var it = document.getElementById("gvice");
    }
    for (i = 0; i < it.rows.length; i++) {
        it.rows[i].className = "bsltrowc";
    }
    //为text文本框赋值
    it.rows[clicktLine].className = "sltrowc";
    $(txtnameid).value = it.rows[clicktLine].id;
    $(txtname).value = it.rows[clicktLine].cells[1].innerHTML;//.split('-')[0];
    currentLine = clicktLine;

    if (btntgetinfo != null && btntgetinfo != "")
        $(btntgetinfo).click();
}
//单击取值
function clickItemGoods(clicktLine) {
    if (document.all) {
        var it = document.getElementById("gvice").children[0];
    }
    else {
        var it = document.getElementById("gvice");
    }
    for (i = 0; i < it.rows.length; i++) {
        it.rows[i].className = "bsltrowc";
    }
//为text文本框赋值
    it.rows[clicktLine].className = "sltrowc";
    $(txtnameid).value = it.rows[clicktLine].id;
    $(txtname).value = it.rows[clicktLine].cells[1].innerHTML;//.split('-')[0];
    $(txtclassname).value = it.rows[clicktLine].cells[2].innerHTML;//.split('-')[0];
    $(txtbrandname).value = it.rows[clicktLine].cells[3].innerHTML;//.split('-')[0];
    if ($(txtclassname).value.length < 1)
    {
        $(txtclassname).value = "";
    }
    if ($(txtbrandname).value.length < 1)
    {
        $(txtbrandname).value = "";
    }
    currentLine = clicktLine;

    if (btntgetinfo != null && btntgetinfo != "")
        $(btntgetinfo).click();
}

//移除Div
function MoveDivTable() {
    if ($("contents")){
        document.body.removeChild(divtable);
       }
	if ($("contentsRow")){
	document.getElementById("UpdatePanel2").removeChild(divtable);
	}
    if (btntgetinfo != null && btntgetinfo != "")
        $(btntgetinfo).click();
}
//焦点消失后移除div
function MoveDivTableBlur() {
setTimeout(function () {
    if ($("contents")){
        document.body.removeChild(divtable);
       }
    if ($("contentsRow")){
        document.getElementById("UpdatePanel2").removeChild(divtable); 
       }
}, 200)
}

总结：在获取生成div位置时遇到一些问题 就是关于 offsetTop 以及 offsetLeft 的如何取距离父层的长度，详情可见我的另一篇博客。