尝试并失败使Linux终端 [英] Trying and failing to make a linux terminal

问题描述

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

This may be a stupid question that might be easy to find but i'm quite new to all of this and i can't seem to find what i'm looking for or atleast i don't know what i need to look for, thus I'm here.

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

So what I'm trying to do is create a kind of Linux terminal... This is what i got so far.

我遇到的是实际输入的文本部分...我一直在尝试使用 contenteditable = true 创建一个div，并尝试使用Input元素，但似乎都无法正常工作.我正在为此使用的当前结构是:

What I'm stuck on is the actual entering text part... I've been trying to create a div with contenteditable=true as well as trying out Input elements but neither seems to be working how i want it to. The current structure that i'm using for this is:

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

但是，这只会删除整个文本行."admin @ localhost:〜$"以及光标.

However this only deletes the whole line of text. "admin@localhost:~$" as well as the cursor.

我还尝试使用JavaScript将光标放在文本后面，但是根本不起作用.

I've also tried using JavaScript to put the cursor after the text but its not working at all.

function forStackOverFlow() {
var textInput = document.getElementsByClassName('write-point');

textInput.onkeydown = function(e) {
    console.log(textInput.value);
    var childTag = document.getElementsByClassName("write-point");
    childTag.parentNode.insertBefore(textInput.value, childTag.nextSibling);
}};

所以我的主要问题是:

• 将div(光标元素)移动到输入文本(用户输入)末尾的方式和方式
• 网页加载后是否可以允许用户立即输入?

谢谢，任何帮助都会很棒:)

Thanks, any help would be great :)

推荐答案

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

I suggest to use span instead of div because it's an inline element, more easy to manage in your case.

接下来，您可以使用监听器来获取Eatch键盘的输入:

Next you can catch eatch keyboard's entry with a listener :

document.body.onkeydown

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

and tell him to append each key into a variable that you can display.

我让您考虑一下您必须管理的所有功能，例如回车或退格事件.

I let you think about all the functionnality you have to manage, like an enter or a backspace event.

您可以在此处找到所需的代码: http://keycode.info/

you can play and find code you will need here : http://keycode.info/

这是一个有效的代码段:

Here is a working snippet :

var command = "";

document.body.onkeydown = function(e){
    var writePoint = document.getElementById('writePoint');
    command += String.fromCharCode(e.keyCode);
    writePoint.innerHTML = command;
  };

.linux-cursor{
  width:7px;
  height:15px;
  background-color:green;
  display:inline-block;
}

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

希望这对您有帮助，它看起来像一个不错的项目.

Hope this help you, it looks like a nice project.

这篇关于尝试并失败使Linux终端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！