Events keydown, beforeinput, keyup

by Nikolay Petrov

HTML

<div class="fx">
  <div>
    <textarea rows="5" name="test-target" id="test-target"></textarea>
    <button type="button" name="btn-reset" id="btn-reset">Reset</button>
  </div>
  <div class="flex">
    <pre id="console-log"></pre>
  </div>
</div>

CSS

.fx {
  -webkit-display: flex;
  display: flex;
  margin-left: -20px;
  margin-right: -20px;
}

.fx > div {
  padding-left: 20px;
  padding-right: 20px;
}

.fx > div:first-child {
   width: 30%;
}

.flex {
  -webkit-flex: 1;
  flex: 1;
}

#test-target {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

JavaScript

let textarea = document.getElementById('test-target'),
consoleLog = document.getElementById('console-log'),
btnReset = document.getElementById('btn-reset');

function logMessage(message) {
  consoleLog.innerHTML += message + "<br>";
}

textarea.addEventListener('keydown', (e) => {
  if (!e.repeat)
    logMessage(`"${e.key}" keydown`);
  else
    logMessage(`"${e.key}" keydown`);
});

textarea.addEventListener('beforeinput', (e) => {
  logMessage(`"${e.data}" beforeinput`);
});

textarea.addEventListener('input', (e) => {
  logMessage(`"${e.data}" input`);
});

textarea.addEventListener('keyup', (e) => {
  logMessage(`"${e.key}" keyup`);
});

btnReset.addEventListener('click', (e) => {
  let child = consoleLog.firstChild;
  while (child) {
   consoleLog.removeChild(child);
   child = consoleLog.firstChild;
  }
  textarea.value = ''
});