Input > textarea > input

by Alexey Ukolov

HTML

<input type="text" id="input">

CSS

input { background: gray; }
textarea { background: yellow; }

JavaScript

const listener = (event) => {
  if (event.target.tagName === 'INPUT' && event.keyCode === 13) {
    const textarea = document.createElement('textarea');
    textarea.value = event.target.value + '\n';
    textarea.addEventListener('keyup', listener);
    event.target.replaceWith(textarea);
    textarea.focus();
  } else if (event.target.tagName === 'TEXTAREA' && event.target.value.indexOf('\n') < 0) {
    const input = document.createElement('input');
    input.value = event.target.value;
    input.addEventListener('keyup', listener);
    event.target.replaceWith(input);
    input.focus();
  }
}

document.querySelector('#input').addEventListener('keyup', listener);