inputElementTakeControl.js

var lastActiveElement = document.activeElement;

function setCaretPosition(elem, caretPos) {
  if (elem != null) {
    if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.move("character", caretPos);
      range.select();
    } else {
      if (elem.selectionStart) {
        elem.focus();
        elem.setSelectionRange(caretPos, caretPos);
      } else elem.focus();
    }
  }
}

function keyDownHandler(event) {
  if (event.key == "q") {
    lastActiveElement.value += "<";
    setCaretPosition(lastActiveElement, lastActiveElement.selectionStart + 1);
  } else if (event.keyCode == 39) {
    lastActiveElement.value += ">";
    setCaretPosition(lastActiveElement, lastActiveElement.selectionStart + 1);
  }
}

function detectBlur() {
  lastActiveElement.removeEventListener("keydown", keyDownHandler);
}

function detectFocus() {
  let activeElement = document.activeElement;
  if (activeElement.tagName == "INPUT" || activeElement.tagName == "TEXTAREA") {
    lastActiveElement = activeElement;
    lastActiveElement.addEventListener("keydown", keyDownHandler);
  }
}

function attachEvents() {
  window.addEventListener
    ? window.addEventListener("focus", detectFocus, true)
    : window.attachEvent("onfocusout", detectFocus);
  window.addEventListener
    ? window.addEventListener("blur", detectBlur, true)
    : window.attachEvent("onblur", detectBlur);
}

attachEvents();