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

Question

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

就像在Desmos应用中一样，您可以键入类似：a^b的内容，它将更改为 ^b ，其中html为：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
    }
});