Prevent soft keyboard from opening when using selection.addRange()

Question

I learnt from this thread how to set the caret after inserting an element in a contenteditable div. However, I would like to prevent soft keyboard from opening up as well.

I have made contenteditable to listen for onfocus event fiddle based on the above thread to preventDefault / stopPropagation but it didn't work. Any suggestion would be great!

function insertNodeAtCaret(node) {
if (typeof window.getSelection != "undefined") {
    var sel = window.getSelection();
    if (sel.rangeCount) {
        var range = sel.getRangeAt(0);
        range.collapse(false);
        range.insertNode(node);
        range = range.cloneRange();
        range.selectNodeContents(node);
        range.collapse(false);
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
    var html = (node.nodeType == 1) ? node.outerHTML : node.data;
    var id = "marker_" + ("" + Math.random()).slice(2);
    html += '<span id="' + id + '"></span>';
    var textRange = document.selection.createRange();
    textRange.collapse(false);
    textRange.pasteHTML(html);
    var markerSpan = document.getElementById(id);
    textRange.moveToElementText(markerSpan);
    textRange.select();
    markerSpan.parentNode.removeChild(markerSpan);
}
}

function blockKeyboard(event) {
    event.stopImmediatePropagation();
    event.preventDefault();
    event.stopPropagation();
    console.log(event);
}

Answer 1

I realized that it can be done by setting node.contentEditable to false before inserting an image and reset it back to true after inserting would do the trick.