使用 selection.addRange() 时防止打开软键盘

Question

我从这个thread 中学到了如何在 contenteditable div 中插入元素后设置插入符号。但是，我也想阻止软键盘打开。

我已经让 contenteditable 监听 onfocus 事件 fiddle based on the above thread 以防止默认/停止传播，但它没有用。任何建议都会很棒！

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

我意识到可以通过在插入图像之前将 node.contentEditable 设置为 false 并在插入图像后将其重置回 true 来实现。

使用 selection.addRange() 时防止打开软键盘

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

javascript

contenteditable

onfocus