带HTML的控制台终端

Question

到目前为止，我设法使这个工作小提琴。我现在的问题是，在按Enter键将数据发送到服务器后，我需要禁用当前输入的编辑并将焦点传递给下一个。

也有人知道如何在项目中使该文本变得闪亮吗？ https://bootsnipp.com/snippets/yNgQ1

PS：您需要按Enter键才能启动控制台

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

您可以通过执行以下操作停用版本：

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

然后追加下一行：

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

然后选择最后一个（新添加的）行并设置焦点：

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

Answer 2

您需要什么

首先，.attr()：这允许您更改contenteditable属性（true / false）。

其次.focus()：关注所需元素（只需使用.last()获取最后.stdin）。

处理光标

在你的div（一个像输入一样工作的那个）中，你将使用color: transparent使文本颜色透明，这样你就可以隐藏光标了。
但是你需要显示的文字，因此您需要添加text-shadow来帮助：text-shadow: 0 0 0 black 要创建光标，您需要一个<div>，然后使用可编辑的内容。

设置完所有内容后，您可以使用.setInterval()和.css()来更改可见性，并在每次更改时.remove()最后一个光标<div>。

＆＃13;

＆＃13;

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();
}

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;