如何正确检测浏览器对document.execCommand('insertText')的支持？

你遇到的问题确实很常见——document.queryCommandSupported('insertText')的返回结果并不总是准确的，尤其是在Firefox中，它可能会误报支持，但实际调用execCommand('insertText')时却无法正常工作。这是因为该API只是检查浏览器是否"声称"支持这个命令，而没有验证实际的执行效果。

可靠的检测方式：实际测试执行效果 #

要准确判断insertText是否可用，最好的方式是实际创建一个测试元素，执行命令并验证结果。以下是一个可行的检测函数：

function isInsertTextSupported() {
    // 创建一个隐藏的测试textarea，避免干扰页面
    const testTextarea = document.createElement('textarea');
    testTextarea.style.position = 'absolute';
    testTextarea.style.opacity = '0';
    testTextarea.style.pointerEvents = 'none';
    document.body.appendChild(testTextarea);

    try {
        testTextarea.focus();
        const testContent = 'test-insert-validation';
        // 尝试执行insertText命令
        const execResult = document.execCommand('insertText', false, testContent);
        // 验证是否真的插入了文本
        const isSupported = execResult && testTextarea.value === testContent;
        return isSupported;
    } catch (error) {
        // 执行出错则说明不支持
        return false;
    } finally {
        // 清理测试元素
        document.body.removeChild(testTextarea);
    }
}

你可以这样使用这个函数：

$(document).ready(function() {
    console.log(isInsertTextSupported());
    if (isInsertTextSupported()) {
        $("#myinp").focus();
        document.execCommand("insertText", false, "aaaaaaaaaaaa");
    } else {
        // 降级处理：直接操作value插入文本
        const input = $("#myinp")[0];
        const cursorPos = input.selectionStart;
        input.value = input.value.slice(0, cursorPos) + "aaaaaaaaaaaa" + input.value.slice(cursorPos);
        input.selectionStart = input.selectionEnd = cursorPos + 12;
        input.focus();
    }
});

更优方案：抛弃execCommand，使用现代API #

其实execCommand已经被标记为**废弃（deprecated）**了，现代浏览器更推荐使用Selection和Range接口，或者直接操作输入元素的value和选区属性来实现文本插入。这种方式兼容性更好，行为也更可控，完全不需要依赖execCommand：

function insertText(element, text) {
    const start = element.selectionStart;
    const end = element.selectionEnd;
    // 替换选中区域的文本，或在光标位置插入
    element.value = element.value.substring(0, start) + text + element.value.substring(end);
    // 恢复光标到插入后的位置
    element.selectionStart = element.selectionEnd = start + text.length;
    element.focus();
}

// 使用示例
$(document).ready(function() {
    insertText($("#myinp")[0], "aaaaaaaaaaaa");
});

这种方法适用于所有现代浏览器，包括Firefox，而且不需要任何兼容性检测，逻辑清晰且可靠。

内容的提问来源于stack exchange，提问作者Oto Shavadze