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

【问题标题】：How to set the position of a custom cursor to follow an input box?如何设置自定义光标的位置以跟随输入框？
【发布时间】：2017-03-10 22:51:34
【问题描述】：

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

我正在使用 this example，但我对 Javascript 的了解不够深入，我不确定如何强制我创建的自定义文本光标将自己定位到它正在替换的光标。

I have a demo here 仍显示原始输入字段。自定义光标位于左上角并在选中时闪烁。我怎样才能做到这一点？

【问题讨论】：

喜欢这个？ jsfiddle.net/whwv3cb4

标签： javascript inform7

【解决方案1】：

所以从我的角度来看，最好的想法是隐藏输入（这是很多应用程序所做的，例如 google docs、atom、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/

【讨论】：

这看起来很棒，谢谢。 :) 我无法定位输入的类而不是它的 ID。为什么我不能使用 getElementsByClassname？我更新了小提琴。 Parchment 在加载时生成它自己的代码，并在行移动时为输入分配一个唯一的 Id，所以我必须通过 LineInput 类来定位它。
更新小提琴会创建一个新链接，所以你必须把它发送给我:) getElements 有一个 S 所以它可能返回超过 1 个元素。试试 getElementsByClassname("")[0]