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

Question

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

像Desmos应用程序，你可以键入类似：a^b，它会在HTML更改为^b女巫：a<sup>b</sup。

也看到，确实语法高亮显示，自动完成，等Monaco Editor

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

在这两个应用程序中，它们实现假输入而不使用文本区域 ，隐藏输入或contenteditable属性。

所以我的问题是如何实现这种行为，并实现假输入，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 
    } 
});