Javascript 用HTML制作一个简单的终端

我想用stdin和stdout制作一个简单的控制台终端。基本上，我有一个功能，输入一些东西，并检索一些东西到聊天室

正如您所知，它会说类似于

root@192.168.2.1：/

然后我只能在那一行中键入。当我按enter/submit时，会出现另一行

root@192.168.2.1：/

供我再次键入

如何使其仅能在最后一行和

root@192.168.2.1：/

（基本上这是锁定的）

有没有更好的方法来实现这一点而不是textarea？？

$（'btnSubmit'）。单击（函数（）{
变量终端=$（“#终端”）；
var stdin=terminal.val（）；
控制台日志（stdin）；
//获取标准输出（示例中为假）
追加（stdout（）+“
”）；
});
函数stdout（stdin）{
返回“root@192.168.2.1:/"
}

.terminal{
背景色：#000；
颜色：#fff
}

发送

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

我所做的是创建一个纯CSS解决方案。我创建了一个

flex

包装器，其中并排有一个静态的、可编辑的

div

。这将确保显示的数字输出不会干扰用户输入

HTML:

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

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

---

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

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

$（函数（）{
$（'.terminal'）。在（'click'，function（）上{
$（“#输入”）.focus（）；
});
$（'#input'）。在（'keydown'，函数搜索（e）{
如果（e.keyCode==13）{
//将输出附加到历史记录中，
//这里我只是附加输入
$（“#history”）.append（$（this.val（）+”
）；
//如果需要，可以更改路径
//这里的实现很糟糕，但你明白了
if（$（this）.val（）.substring（0，3）='cd'）{
$（'#path'）.html（$（this.val（）.substring（3）+'>'）；
}
//清除输入
$（'#input'）.val（''）；
}
});
});
.terminal{
背景：黑色；
颜色：白色；
字体：信使；
填充：10px；
高度：100px；
溢出：隐藏；
}
.线路{
显示：表格；
宽度：100%；
}
.终端跨度{
显示：表格单元格；
宽度：1px；
}
.终端输入{
显示：表格单元格；
宽度：100%；
边界：无；
背景：黑色；
颜色：白色；
大纲：无；
}

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