入力ボックスに従うカスタムカーソルの位置を設定するにはどうすればいいですか？

Question

ウェブサイト（Parchmentから生成）を表示したときに、私のインフォームゲームでテキストカーソル（キャレット）をカスタマイズする効果的な方法を探しています。

私はthis exampleの作業に取り組んでいますが、Javascriptについての私の知識は不安定です。私が作成したカスタムテキストカーソルを強制的に置き換える方法は不明です。

I have a demo here元の入力フィールドは引き続き表示されます。カスタムカーソルは左上隅にあり、選択すると点滅します。どうすればこれを達成できますか？

Answer 1

私の見解は、入力を隠すことです（これは多くのアプリがGoogleドキュメント、アトム、vscodeなどのようになります）。そして偽のカーソルと "入力"ボックスを作成します。そのためのコードは、何かのようになります：

var input = document.getElementById('input'); 
var output = document.getElementById('output'); 

input.addEventListener('keyup', function() { 
    output.removeChild(document.getElementById('cursor')); 
    output.innerHTML += input.value; 
    input.value = ''; 
    makeCursor(); 
}); 

document.addEventListener('click', function() { 
    input.focus(); 
}); 

function makeCursor() { 
    var cursor = document.createElement('div'); 
    cursor.setAttribute('id', 'cursor'); 
    output.appendChild(cursor); 
} 
makeCursor(); 

と私はここで実行可能な例があります。このようhttps://jsfiddle.net/whwv3cb4/2/