Console terminal with HTML

Question

So far I managed to make this working fiddle. My problem now is that after I press enter to send the data to the server, i need to disable the edit on the current input and pass the focus to the next.

Also does anyone have any idea how do I make that text bliking thing in the project? https://bootsnipp.com/snippets/yNgQ1

PS: you need to press enter to start the console

var terminal = $('#terminal');

$(document).keypress(function(e) {
  if (e.which === 13) {
    e.preventDefault();
    var stdin = $('.stdin').last().text();
    console.log(stdin);
    consoleInteration(stdin);
  }
});

function consoleInteration(stdin) {

  //RESULT FROM AJAX POST
  result = "This is the output from the shell";
  terminal.append('<br><div class="static">' + result + '</div><br>');
  terminal.append('<div class="static"><span class="fa fa-arrow-right console-arrow"></span> ~ </div>');
  terminal.append('<div class="stdin" id="stdin" contenteditable="true"></div>');


}

.terminal {
  width: 100%;
  padding: 4px;
  background-color: black;
  opacity: 0.7;
  height: 650px;
  color: #fff;
  font-family: 'Source Code Pro', monospace;
  font-weight: 200;
  font-size: 14px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-y: auto;
}

.terminal div {
  display: inline-block;
}

.terminal .static {
  color: #5ed7ff;
  font-weight: bold;
}

.console-arrow {
  color: #bde371;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terminal" class="terminal">
</div>

Answer 1

What you need

First, .attr(): this allow you to change the contenteditable attribute (true/false).

Secondly .focus(): focus the desired element (just get the last .stdin with .last()).

---

Handling the cursor

In your div (the one that works like an input), you will make the text color as transparent with color: transparent, this way you will hide the cursor.
But you need the text to show, so you will add text-shadow to help: text-shadow: 0 0 0 black.
To create the cursor, you will need one <div> after the other with editable content.

With everything set, you make use of .setInterval() with .css() to change the visibility and, at every change, .remove() the last cursor <div>.

---

var terminal = $('#terminal');
window.setInterval(function () {
      if ($('#cursor').css('visibility') === 'visible') {
          $('#cursor').css({
              visibility: 'hidden'
          });
      } else {
          $('#cursor').css({
              visibility: 'visible'
          });
      }
  }, 500);

$(document).keypress(function(e) {
  if (e.which === 13) {
    e.preventDefault();
    var stdin = $('.stdin').last().text();
    console.log(stdin);
    consoleInteration(stdin);
  }
});

function consoleInteration(stdin) {

  $("#cursor").remove();
  $(".stdin").last().attr("contenteditable", "false");

  //RESULT FROM AJAX POST
  result = "This is the output from the shell";
  terminal.append('<br><div class="static">' + result + '</div><br>');
  terminal.append('<div class="static"><span class="fa fa-arrow-right console-arrow"></span> ~ </div>');
  terminal.append('<div class="stdin" id="stdin" contenteditable="true"></div>');
  terminal.append('<div id="cursor"></div>');

  $(".stdin").last().focus();
}

.terminal {
  width: 100%;
  padding: 4px;
  background-color: black;
  opacity: 0.7;
  height: 650px;
  color: #fff;
  font-family: 'Source Code Pro', monospace;
  font-weight: 200;
  font-size: 14px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow-y: auto;
}

.terminal div {
  display: inline-block;
}

.terminal .static {
  color: #5ed7ff;
  font-weight: bold;
}

.console-arrow {
  color: #bde371;
}

.stdin{
    color: transparent;
    text-shadow: 0 0 0 white;
}

#cursor {
    top: 10px;
    width: 7px;
    height: 15px;
    margin-bottom: 0;
    background: #5ed7ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terminal" class="terminal">
</div>

Answer 2

You can disable edition by doing :

$('.stdin').last().removeAttr("contenteditable")

Then append the next line :

terminal.append('<div class="stdin" id="stdin" contenteditable="true"></div>')

Then select the last (newly added) line and set focus on it :

$('.stdin').last().focus()