Edit in JSFiddle

// The simplest example of command web app
// Zzbaivong - https://baivong.github.io

(function($) {
  'use strict';

  function focusInput() {
    $input.focus();
  }

  function log(type, txt, cmd) {
    var $result = $('<p>', {
      'class': type,
      text: txt
    });
    if (cmd) $result.prepend($('<span>', {
      'class': 'prefix',
      text: 'root@example:~#'
    }));
    $result.appendTo($logs);
  }

  function rollCaret(move) {
    var value = $input.val(),
      pos = $input.prop('selectionStart');

    if (move === 'left' && pos !== 0) pos--;
    if (move === 'right') pos++;

    $output.html(value.slice(0, pos)).append($('<span>', {
      'class': 'blinker',
      text: '|'
    })).append(value.slice(pos));
  }

  function rollCommands() {
    $input.val(commands[index]).prop('selectionStart', $input.val().length);
    rollCaret();
  }


  var $input = $('#input'),
    $output = $('#output'),
    $logs = $('#logs'),
    commands = [],
    index = 0;

  focusInput();
  $(window).focus(function() {
    focusInput();
  });
  $input.on('blur keydown', function() {
    focusInput();
  });

  $input.on('input', function() {
    rollCaret();
  }).on('keydown', function(e) {
    if (e.keyCode === 13) {

      var val = $input.val();

      log('command', val, true);
      commands.push(val);
      index = commands.length;

      if (val === 'help') {
        log('info', 'echo [value]');

      } else if (/^echo\s.+$/.test(val)) {
        log('success', val.slice(5));

      } else {
        log('error', 'Error: Command not recognized. Type "help" for a list of commands.');
      }

      $input.val('');
      $output.html($('<span>', {
        'class': 'blinker',
        text: '|'
      }));
      $('html, body').scrollTop(99999);

      return false;
    } else if (e.keyCode === 38) {

      if (index > 0 && index <= commands.length) index--;
      rollCommands();

      return false;
    } else if (e.keyCode === 40) {

      if (index >= 0 && index < commands.length - 1) index++;
      rollCommands();

      return false;
    } else if (e.keyCode === 37) {

      rollCaret('left');
    } else if (e.keyCode === 39) {

      rollCaret('right');
    }
  });

})(jQuery);

<div id="logs"></div>
<p id="cmd">
  <span class="prefix">root@example:~#</span><span id="output"><span class="blinker">|</span></span>
</p>
<textarea name="input" id="input" autocapitalize="off" autofocus></textarea>

body {
  background: black;
  color: white;
  font-family: monospace;
  font-size: 18px;
}

#input {
  position: absolute;
  width: 100px;
  height: 0;
  opacity: 0;
  left: -9999em;
}

#output {
  color: #0be80b;
  white-space: pre-wrap;
}

.prefix {
  font-weight: bold;
  padding-right: 7px;
}

.info {
  color: #2196F3;
}

.success {
  color: yellow;
}

.error {
  color: #ff1b1b;
}

.blinker {
  position: absolute;
  margin-left: -0.2em;
  color: #0be80b;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0.0;
  }
}