How blur (focus lost) the image after insertion with execCommand in IE10?

问题

I have a content editable DIV such as:

<div contenteditable='true' id='myRichTextBox'></div>

In addition, I have a button that inserts an image into the mentioned DIV. Once the image inserted it has focused with resizable handlers.
How I can lose it's focus and bring back the focus to the content editable DIV ?

<button type='button' onclick='insertImage()'>Insert an image</button>

Javascript code:

function insertImage()
{
document.execCommand('insertImage',false,'myImage.png');
}

Thanks for any help

回答1:

You can work round this in several ways, but a simple one would be to use document.execCommand("InsertHTML") in most browsers, falling back to pasteHTML() in IE. However, this will not work in IE 11 because it does not support document.selection or the InsertHTML command.

function insertImageWithInsertHtml(imgSrc) {
    var imgHtml = "<img src='" + imgSrc + "'>";
    var sel;
    if (document.queryCommandSupported("InsertHTML")) {
        document.execCommand("InsertHTML", false, imgHtml);
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var range = sel.createRange();
        range.pasteHTML(imgHtml);
        range.collapse(false);
        range.select();
    }
}

Another way which would work in all browsers except IE <= 8 (for which you can use the same fallback as above) would be to insert the image manually using the insertNode() method of a Range obtained from the selection. This is the most future-proof and standards-compliant method so is what I'd recommend:

function insertImageWithInsertNode(imgSrc) {
    var sel;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0).cloneRange();
            range.deleteContents();
            var img = document.createElement("img");
            img.src = imgSrc;
            range.insertNode(img);

            // Place the caret immediately after the image
            range.setStartAfter(img);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var range = sel.createRange();
        range.pasteHTML("<img src='" + imgSrc + "'>");
        range.collapse(false);
        range.select();
    }
}

Finally, here's a live demo showing all three techniques:

http://jsfiddle.net/timdown/9ScLA/3/

回答2:

I used the following solution and worked!

function insertImage(imgSrc)
{
    var ua = navigator.userAgent.toLowerCase();
    var tr;
    if (ua.indexOf("msie") > 0)
        tr = document.selection.createRange();
    document.execCommand("insertImage", false, imgSrc);
    if(ua.indexOf("firefox") > 0)
        document.execCommand("enableObjectResizing", false, false);
    if (ua.indexOf("msie") > 0)
    {
        tr.collapse(false);
        tr.select();
    }
    this.textbox.focus();
}

来源：https://stackoverflow.com/questions/17608992/how-blur-focus-lost-the-image-after-insertion-with-execcommand-in-ie10

标签

javascript

jquery

internet-explorer-10

contenteditable