JSFiddle - React, Tailwind, and code Playground

HTML

<input value="Replace __" id="test"/>
<br/>
<div id="log" style="height:400px; background-color:#e3e3e3; overflow-y: scroll;"></div>

JavaScript

const testInput = document.querySelector('#test');

testInput.addEventListener('keydown', function(e) {
	//this.setSelectionRange(8,9);
  log('keydown ' + this.value);
});

testInput.addEventListener('keypress', function(e) {
	this.setSelectionRange(8,9);
  log('keypress ' + this.value);
});

testInput.addEventListener('keyup', function(e) {
  log('keyup ' + this.value);
});

testInput.addEventListener('input', function(e) {
  log('input ' + this.value);
});

function log(msg, color) {
  $("<p>" + msg + "</p>")
    .css("color", color)
    .prependTo("#log");
}