用 HTML 制作一个简单的终端答案

【问题标题】：Making a simple terminal in HTML用 HTML 制作一个简单的终端
【发布时间】：2018-01-23 09:39:04
【问题描述】：

我想使用标准输入和标准输出制作一个简单的控制台终端。基本上我有一个函数可以输入一些东西并在聊天中检索一些东西。

如您所知，它会说类似root@192.168.2.1:/ 的内容，然后我只能在该行中输入。当我按下回车/提交时，会出现另一行 root@192.168.2.1:/ 供我再次输入。

如何使它只能在最后一行和root@192.168.2.1:/ 前面输入（基本上这是锁定的）？

有没有更好的想法来实现这个而不是 textarea？

$('#btnSubmit').click(function() {
  var terminal = $('#terminal');
  var stdin = terminal.val();
  console.log(stdin);
  //Get stdout (FAKE FOR THE EXAMPLE)    
  terminal.append(stdout() + '<br>');
});


function stdout(stdin) {
  return "root@192.168.2.1:/"
}

.terminal {
  background-color: #000;
  color: #fff
}

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


<textarea class="terminal" rows="20" id="terminal"></textarea>
<button class="btn btn-primary" id="btnSubmit" type="button">Send</button>

【问题讨论】：

我相信如果不将标签作为内联字符串返回，就不可能将任何 HTML 插入到 textarea 元素中。
该死的。有人可以帮我吗？ ://
如果 textarea 不是绝对必要的，您可以尝试使用具有contenteditable 属性的div？然后在那里添加你想要的元素。
我不需要文本区域。我只是在自己尝试

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

就像你说的，你真的只需要写一行。你可以把这一行作为输入字段，然后在输入字段上方的 div 中输出“历史”。

这是一个示例，唯一看起来不像终端的是它的滚动方式，但我想这应该可以通过一些额外的代码来修复。

$(function() {
    $('.terminal').on('click', function() {
        $('#input').focus();
    });

    $('#input').on('keydown', function search(e) {
        if (e.keyCode == 13) {
            // append your output to the history,
            // here I just append the input
            $('#history').append($(this).val() + '<br/>');

            // you can change the path if you want
            // crappy implementation here, but you get the idea
            if ($(this).val().substring(0, 3) === 'cd ') {
                $('#path').html($(this).val().substring(3) + '&nbsp;>&nbsp;');
            }

            // clear the input
            $('#input').val('');

        }
    });
});

.terminal{
  background: black;
  color: white;
  font: courier;
  padding: 10px;
  height: 100px;
  overflow: hidden;
}

.line{
  display: table;
  width: 100%;
}

.terminal span{
  display:table-cell; 
  width:1px;
}

.terminal input{
  display:table-cell; 
  width:100%;
  border: none;
  background: black;
  color: white;
  outline: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="terminal">
  <div id="history">
    
  </div>
  <div class="line">
    <span id="path">c:/&nbsp;>&nbsp;</span>
    <input type="text" id="input">
  </div>
</div>

【讨论】：

【解决方案2】：

您可以尝试插入一个可编辑的 div。

JSFiddle Terminal Example

我所做的是创建一个纯 CSS 解决方案。我创建了一个flex 包装器，并排有一个静态和可编辑的div。这将确保显示的任何数字输出都不会干扰用户输入。

HTML：

<section>
    <div class="static">IP ADDRESS</div>
    <div class="input" contenteditable="true"></div>
</section>

CSS：

section {
    display: flex;
    flex-flow: row nowrap;
    width: 500px;
    height: auto;
    margin: 0 auto;
    background-color: lightgrey;
    font-family: monospace;
}
.static {
    width: auto;
    padding-right: 20px;
}
.input {
    flex: 1;
}

【讨论】：