javascript - 如何设置自定义光标的位置以跟随输入框？

Question

当查看网站（通过Parchment生成）时，我正在寻找一种有效的方法来自定义通知游戏中的文本光标（插入符号）。

我正在研究这个例子，但我对 Javascript 的了解并不牢固，我不确定如何强制我创建的自定义文本光标将自己定位到它正在替换的那个。

我在这里有一个演示，仍然显示原始输入字段。自定义光标位于左上角并在选中时闪烁。我怎样才能做到这一点？

Answer 1

所以从我的角度来看，最好的想法是隐藏输入（这是很多应用程序所做的，如谷歌文档、原子、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/