2

Web サイト ( Parchmentで生成) を表示したときに、インフォーム ゲームでテキスト カーソル (キャレット) をカスタマイズする効果的な方法を探しています。

私はこの例に取り組んでいますが、Javascript に関する私の知識は不安定であり、作成したカスタム テキスト カーソルを強制的に置き換える方法がわかりません。

元の入力フィールドが表示されたままのデモがあります。カスタム カーソルは左上隅にあり、選択すると点滅します。どうすればこれを達成できますか?

4

1 に答える 1

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/

于 2016-10-28T06:32:01.630 に答える