Javascript 尝试创建linux终端但失败

这可能是一个愚蠢的问题，可能很容易找到，但我对这一切都很陌生，我似乎找不到我要找的东西，或者至少我不知道我需要找什么，所以我在这里

所以我想做的是创建一种Linux终端。。。这就是我目前得到的

我一直坚持的是实际输入的文本部分。。。 我一直在尝试创建一个contenteditable=true的div，并尝试输入元素，但这两个元素都没有达到我想要的效果。 我用于此的当前结构是：

<div class="title" contenteditable="false" >
admin@localhost:~$ 
<div class="write-point" contenteditable="true" ></div>
<div class="linux-cursor" contenteditable="false"></div>

因此，我的主要问题是：

• 将div（光标元素）移动到输入文本（用户输入）末尾的方式和内容
• 是否可以允许用户在网页加载后立即键入

---

谢谢，任何帮助都会很好：）

我建议使用span而不是div，因为它是一个内联元素，在您的情况下更易于管理

接下来，您可以通过侦听器捕捉eatch键盘的条目：

document.body.onkeydown

并告诉他将每个键附加到一个可以显示的变量中

我让您考虑所有必须管理的功能性，比如进入或退格事件

您可以在此处播放和查找所需的代码：

以下是一个工作片段：

var命令=”；
document.body.onkeydown=函数（e）{
var writePoint=document.getElementById（'writePoint'）；
command+=String.fromCharCode（例如keyCode）；
writePoint.innerHTML=命令；
};
.linux游标{
宽度：7px；
高度：15px；
背景颜色：绿色；
显示：内联块；
}

admin@localhost:~$ 
使用一些CSS可以更好地做到这一点，以确保“插入符号”元素始终位于
contenteditable
元素之后，使用一些JS可以确保
contenteditable
元素始终处于焦点位置。您可以尝试通过将
autofocus
添加到
contenteditable
元素并对插入符号元素使用
来完成最后一件事，但这对
contenteditable
元素不起作用。注意：不需要键盘事件侦听器：


const input=document.getElementById（'input'）；
const caret=document.getElementById（'caret'）；
//如果焦点移离输入，则将焦点移回输入：
input.addEventListener（'blur'，（e）=>{
input.focus（）；
});
//将焦点设置为输入，以便可以立即开始键入：
input.focus（）
正文{
背景：#000；
颜色：#0F0；
字体系列：monospace；
高度：100vh；
框大小：边框框；
溢出x：隐藏；
溢出y：滚动；
保证金：0；
填充：16px；
}
#输入{
显示：内联；
单词break：打破一切；
大纲：无；
能见度：可见；
}
#插入符号{
边界：0；
填充：0；
大纲：无；
背景色：#0F0；
显示：内联块；
字体系列：monospace；
}
admin@localhost:~$
但输入后无法删除文本。谢谢@Florient这帮了大忙：）谢谢
字符串。fromCharCode（e.keyCode）
是一种非常糟糕的方法，因为许多键没有正确处理：箭头不起作用并打印奇怪的字符，大多数符号键显示不正确的键。。。这就是为什么
e.which
和
e.keyCode
都被弃用的部分原因
e.key
或
e.code
应改为使用，这也使代码更容易理解。
document.body.onkeydown