how can i create fake input in html and javascript

Question

I need to create a fake input so that i can change the content to be html elements.

Like in Desmos app you can type something like : a^b and it will change to a^b witch in html is:a<sup>b</sup.

Also see the Monaco Editor that does syntax highlighting, autocomplete, etc.

I am familiar with contenteditable attribute but in Demos they don't use it.

in both of these applications they implementing a fake input without using text area , hidden input, or contenteditable attribute.

So my question is how to achieve that behavior and implement a fake input with fake oninput, onblur, oncopy etc handler functions.

It looks as if they have an onfocus of the element which then kicks of a onkeyup function which will read your keystrokes and depending on what you press, they add attributes to a span (which in turn must populate the html) — Pete, Oct 11 '17 at 14:32

score 0 · Answer 1 · answered Oct 11 '17 at 14:37

0

You can use keydown/keyup/keypress events for edit content in your fake-field. Something like this:

$(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
    }
});

answered Oct 11 '17 at 14:37

Sergey

1
1

By the way Monaco Editor are using textareas! – Sergey Oct 11 '17 at 14:49
True, didn't see that until now. it is storing the raw value of the editor. but still i cant think of a way to implement the events right. – kfir2142 Oct 11 '17 at 16:54
You can catch clicks on each line, than add textarea to cursor position. – Sergey Oct 13 '17 at 12:31

how can i create fake input in html and javascript

1 Answers1