어떻게 html과 javascript에서 가짜 입력을 만들 수 있습니까?

Question

html 요소가되도록 내용을 변경할 수 있도록 가짜 입력을 만들어야합니다. Desmos 응용 프로그램에서 당신과 같이 입력 할 수 있습니다처럼

: a^b를하고 HTML에 ^B 마녀로 변경됩니다입니다 a<sup>b</sup.

또한 구문 강조, 자동 완성 등을 수행하는 Monaco Editor 참조

내가 contenteditable 속성을 잘 알고 있지만, 데모에 그들은 그것을 사용하지 마십시오.

이러한 응용 프로그램에서는 텍스트 영역 , 숨겨진 입력 또는 contenteditable 특성을 사용하지 않고 가짜 입력을 구현합니다.

그래서 내 질문은 그 동작을 달성하고 가짜 oninput, onblur, oncopy 등의 처리기 기능을 사용하여 가짜 입력 을 구현하는 방법입니다.

Answer 1

가짜 필드의 내용을 편집하려면 keydown/keyup/keypress 이벤트를 사용할 수 있습니다. 이 같은 뭔가 : 그들은 요소의 onfocus 및있는 것처럼

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