HTML/CSS/Javascript 类似命令行的界面

Question

我想创建一个命令行界面，但我很难找到正确的光线来获取输入。我需要不允许多行命令，但当文本到达页面末尾时将文本换行。现在我有一个 textarea 设置为只有一行并使用自动换行和东西，每当用户按下 enter 时它会将 textarea 的值设置为空并将 textarea 的旧值添加到段落

所以基本上：我要什么

用户可以输入任意多的文本
用户无法输入多行文本
一旦用户按下回车键，文本就会添加到段落中并清除文本区域

我的问题

当用户按下回车键时，文本区域被设置为无文本，但随后添加换行符（我不想要）
当文本添加到段落时，会添加 space 和换行符 (???)（可能与 textarea 添加换行符的方式有关）

也许有另一种更好的方法，或者我可以修复我已经完成的事情吗？

这是我的代码：

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel = "stylesheet" type = "text/css" href = "brdstyle.css" />
    <title>BrD</title>
</head>

<script src = "brdapp.js"></script>

<body>
<div id = "background">
    <div id = "console">
        <p id = "consoletext">
            Ispum dolor ugin hegar<br/>
            dank daniel for life
        </p>
        <textarea rows = "1" id = "textinput" onkeydown = "checkInput();"></textarea>
    </div>
</div>
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: rgb(0, 0, 0);
}

#background {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    margin: 0px;
    padding: 0px;
}

#console {
    margin: 0px;
    padding: 0px;
}

#consoletext {
    color: rgb(255, 255, 255);
    font-family: Monospace;
    margin: 10px 0px 0px 10px;
}

#textinput {
    resize: none;
    margin: 0px 0px 10px 10px;
    border: none;
    outline: none;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-family: Monospace;
    width: calc(100% - 20px);
    overflow: hidden;
}

Javascript

function checkInput () {
    var event = window.event || event.which;

    if (event.keyCode == 13) {
        addLine(document.getElementById("textinput").value);
        document.getElementById("textinput").value = "";
    }

    document.getElementById("textinput").style.height = (document.getElementById("textinput").scrollHeight) + "px";
}

function addLine (line) {
    var textNode = document.createTextNode(line);
    document.getElementById("consoletext").appendChild(textNode);
}

如果您回答了这个问题，谢谢您的帮助！ :)

Answer 1

您应该将 textarea 元素更改为文本输入

<input type="text" id="textinput" onkeydown="checkInput();">

这应该摆脱奇怪的换行符和 spaces。您还应该注意，由于您在 "dank daniel for life" 之后添加了一个换行符，因此在原始段落的末尾会自动出现一个 space :)。

P.S 我仍然有点困惑，为什么你不想在新行上附加文本，因为它是一个终端，但祝你好运不管你在做什么

希望对您有所帮助！

Answer 2

好的，由于您有多个问题，我将把它分成两部分：
1. 清除文本字段后添加换行符。您可以通过在识别按下 "enter" 键的位置调用 event.preventDefault() 来停止此操作。

function checkInput() {
    var event = window.event || event.which;

    if (event.keyCode == 13) {
        event.preventDefault();
        addLine(document.getElementById("textinput").value);
        document.getElementById("textinput").value = "";
    }

    document.getElementById("textinput").style.height = (document.getElementById("textinput").scrollHeight) + "px";
}

function addLine(line) {
    var textNode = document.createTextNode(line);
    document.getElementById("consoletext").appendChild(textNode);
}

2。我无法复制您的 newline/space 错误，但它可能与上述事件未取消有关。

这是您自己尝试的代码片段：

function checkInput() {
    var event = window.event || event.which;

    if (event.keyCode == 13) {
        event.preventDefault();
        addLine(document.getElementById("textinput").value);
        document.getElementById("textinput").value = "";
    }

    document.getElementById("textinput").style.height = (document.getElementById("textinput").scrollHeight) + "px";
}

function addLine(line) {
    var textNode = document.createTextNode(line);
    document.getElementById("consoletext").appendChild(textNode);
}

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: rgb(0, 0, 0);
}

#background {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background-color: black;
    margin: 0px;
    padding: 0px;
}

#console {
    margin: 0px;
    padding: 0px;
}

#consoletext {
    color: rgb(255, 255, 255);
    font-family: Monospace;
    margin: 10px 0px 0px 10px;
}

#textinput {
    resize: none;
    margin: 0px 0px 10px 10px;
    border: none;
    outline: none;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-family: Monospace;
    width: calc(100% - 20px);
    overflow: hidden;
}

<div id = "background">
    <div id = "console">
        <p id = "consoletext">
            Ispum dolor ugin hegar<br/>
            dank daniel for life
        </p>
        <textarea rows = "1" id = "textinput" onkeydown = "checkInput();"></textarea>
    </div>
</div>

Answer 3

要防止添加换行符，您需要在重置文本区域后立即调用 event.preventDefault()。

HTML/CSS/Javascript 类似命令行的界面

HTML/CSS/Javascript Command Line-Like Interface

html

javascript

css

console

textarea