获取div光标并插入图片

最新推荐文章于 2019-12-12 17:19:35 发布

chenzhh1987

最新推荐文章于 2019-12-12 17:19:35 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： java

本文链接：https://blog.csdn.net/chenzhh1987/article/details/84448126

js 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript在网页上动态展示图片，并通过不同的浏览器兼容性解决方案确保跨平台的顺利加载。从IE到现代浏览器，我们探讨了创建自定义函数来处理图片插入过程，包括如何在不同环境下正确地使用`document.selection`和`document.getSelection`方法。同时，文章还提供了一种在获取焦点后，如何在输入框内插入图片元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//显示图片
function showImage(div_id,img_src) {
    //IE support  
    if (document.selection) {
    	var myField = document.getElementById(div_id);   //对象   
        var myValue = '<img src = "'+img_src+'"/>';  //值
        myField.focus();
        var sel = document.selection.createRange();
        sel.pasteHTML(myValue);
    }else {
    	var sel = div_range;
    	if(sel == null || sel == 'undefined'){
    		myfocus(div_id);
    		sel = document.getSelection().getRangeAt(0);
    	}
        var img = document.createElement("img");
        img.src = img_src;
        sel.insertNode(img);
    }
}
var div_range;
function divOnmouseout(){
	var sel = document.getSelection();
	if(sel){//ff,ch
		div_range = sel.getRangeAt(0);
	}

//获取焦点
function myfocus(obj) {
    if (typeof obj == 'string') obj = document.getElementById(obj);
    obj.focus();
    if (obj.createTextRange) {//ie
        var rtextRange = obj.createTextRange();
        if(obj.value == null || obj.value == '') return;
        rtextRange.moveStart('character', obj.value.length);
        rtextRange.collapse(true);
        rtextRange.select();
    }else if (obj.selectionStart){//chrome "<input>"、"<textarea>"
        obj.selectionStart = obj.value.length;
    }else if(window.getSelection){
	    var sel = window.getSelection();
	    var tempRange = document.createRange();
	    if(obj.firstChild == null || obj.firstChild == '') return;
	    tempRange.setStart(obj.firstChild, obj.firstChild.length);
	    sel.removeAllRanges();
	    sel.addRange(tempRange);
	}
}
}