htmlとjavascriptで偽の入力を作成する方法

Question

コンテンツをhtml要素に変更できるように偽の入力を作成する必要があります。

Desmosアプリで、あなたのような何かを入力することができますように：a^bをし、それがHTMLで^B魔女に変更されますです：a<sup>b</sup。

また、私はcontenteditable属性に精通していますが、デモでは、彼らはそれを使用していないシンタックスハイライト、オートコンプリートなど

を行いMonaco Editorを参照してください。

これらのアプリケーションでは、テキスト領域 、非表示入力、またはcontenteditable属性を使用せずに偽の入力を実装しています。

私の質問は、その動作を実現し、偽の入力、onblur、oncopyなどのハンドラ関数を使って偽入力 を実装する方法です。

Answer 1

偽装フィールドのコンテンツを編集するには、keydown/keyup/keypressイベントを使用できます。このような 何か：彼らは、あなたのキーストロークを読んで、あなたが押すものに応じますonkeyupの機能のキックが、彼らはスパンに属性を追加する要素の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 
    } 
});