Text

by Hristiyan Dodov

HTML

<div contenteditable="true">the text</div>

JavaScript

const input = document.querySelector('div');
const log = document.getElementById('values');

input.addEventListener('keydown', updateValue);
input.addEventListener('keyup', updateValue);

document.addEventListener('selectionchange', () => {
  console.log(document.getSelection());
});

function updateValue(e) {
	if (e.key.indexOf('Arrow') >= 0) {
		return
  }

	input.innerHTML += e.type + e.key
  var selObj = window.getSelection();
  var range  = selObj.getRangeAt(0);
  range.setStart(input.childNodes[0], input.innerText.length)
  
	e.preventDefault()
  console.log(e)
}