javascript - 带有 HTML 的控制台终端

Question

到目前为止，我已经成功地完成了这个工作 fiddle 。我现在的问题是，在我按下回车键将数据发送到服务器后，我需要禁用对当前输入的编辑并将焦点传递到下一个输入。

还有谁知道如何在元素中制作文本闪烁的东西吗？ https://bootsnipp.com/snippets/yNgQ1

PS:需要回车启动控制台

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