2

I'm looking for an effective way to customize the text cursor (caret) in my inform game when viewed a website (generated through Parchment).

I'm working off of this example, but my knowledge of Javascript is shaky and I'm uncertain how to force the custom text cursor I've created to position itself to the one it's replacing.

I have a demo here with the original input field still displayed. The custom cursor is sitting in the top-left corner and blinks when selected. How can I accomplish this?

Community
  • 1
  • 1
user610455
  • 89
  • 1
  • 12

1 Answers1

1

So the best idea from my perspective is to hide the input (this is what a lot of apps do like google docs, atom, vscode, etc) and then create a fake cursor and "input" box. The code for it would be something like:

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();

and I have a runnable example here: https://jsfiddle.net/whwv3cb4/2/

PaulBGD
  • 2,018
  • 5
  • 22
  • 30
  • This looks great, thank you. :) I'm having trouble targeting the input's class instead of its Id. Why can't I use getElementsByClassname? I updated the Fiddle. Parchment generates it's own code on load and assigns a unique Id to the input whenever the line moves, so I have to target it by the class LineInput instead. – user610455 Oct 28 '16 at 20:50
  • Updating the fiddle makes a new link, so you've have to send it to me :) As well getElements has an S so it's probably returning more than 1 element. Try getElementsByClassname("")[0] – PaulBGD Oct 28 '16 at 22:18