Как я могу создать ложный ввод в HTML и JavaScript

Question

Мне нужно создать поддельные входные данные, чтобы я мог изменить содержимое на HTML-элементы.

Например, в приложении Desmos вы можете напечатать что-то вроде: a^b и он изменится на ведьму в html: a<sup>b</sup,

Также см. Monaco Editor, который выполняет подсветку синтаксиса, автозаполнение и т. Д.

Я знаком с contenteditable атрибут, но в демонстрациях они не используют его.

в обоих этих приложениях они реализуют ложный ввод без использования текстовой области, скрытого ввода или contenteditable приписывать.

Поэтому мой вопрос заключается в том, как добиться такого поведения и реализовать ложный ввод с помощью функций-обработчиков fake 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
    }
});