Question

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

我正在处理this example，但我对Javascript的了解不稳定，而且我不确定如何强制我创建的自定义文本光标定位到一个它正在取代。

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

Answer 1

所以从我的角度来看，最好的想法就是隐藏输入（这是许多应用程序的功能，如google docs，atom，vscode等），然后创建一个虚拟光标和＆＃34;输入＆＃34;框。它的代码如下：

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/

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

1 个答案: