javascript - 如何在 html 和 javascript 中创建虚假输入

Question

我需要创建一个假输入，以便我可以将内容更改为 html 元素。

就像在Desmos应用程序中一样，您可以输入类似 :a^b的内容，它会在 html 中更改为^b女巫 is: a<sup>b</sup。

另请参阅执行语法突出显示、自动完成等功能的Monaco Editor 。

我熟悉contenteditable属性，但在演示中他们不使用它。

在这两个应用程序中，他们在不使用文本区域、隐藏输入或contenteditable属性的情况下实现了假输入。

所以我的问题是如何实现这种行为并使用假 oninput、onblur、oncopy 等处理函数实现假输入。

Answer 1

您可以使用 keydown/keyup/keypress 事件来编辑假字段中的内容。像这样的东西：

$(document).click(function (e) {
    if($(e.target).is("#your_editor")) {
        // editor area focused
        if($(this).hasClass("focused")) {
            return;
        }
        $(this).addClass("focused");
    } else {
        // editor area is not focused
        $("#your_editor").removeClass("focused");
    }
});

$(document).keydown(function (e) {
    // some key are pressed
    if($("#your_editor").hasClass("focused")) {
        // do something with e.keyCode
    }
});