HTMLCSSJavascript Command Line-Like Interface

I would like to create a mand-line interface but I am stumped on finding the right ray to get input. I need to not allow multi-line mands but wrap the text to a newline when it reaches the end of a page. Right now I have a textarea set up to only be one line and use word-wrap and stuff, and whenever the user presses enter it sets the value of the textarea to nothing and adds the old value of the textarea to a paragraph

So basically: What i want

User can enter as much text as they want
User can not enter multi-line text
Once user presses enter, the text gets added to a paragraph and textarea is cleared

My problem

When user presses enter the textarea gets set to no text but then adds a newline(which i do not want)
When text is added to paragraph there is a space and newline(???) being added(maybe related to how textarea adds newline)

Maybe there is another way to do this that is better or can I just fix what I have already done?

Here is my code:

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

If you answer this question, thank you for your help! :)

So basically: What i want

User can enter as much text as they want
User can not enter multi-line text
Once user presses enter, the text gets added to a paragraph and textarea is cleared

My problem

When user presses enter the textarea gets set to no text but then adds a newline(which i do not want)
When text is added to paragraph there is a space and newline(???) being added(maybe related to how textarea adds newline)

Maybe there is another way to do this that is better or can I just fix what I have already done?

Here is my code:

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

If you answer this question, thank you for your help! :)

Share Improve this question asked Jul 9, 2016 at 2:38 Brady W 27112 silver badges24 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

Alright, as you had multiple problems, I will break this into 2 parts:
1. Newline being added after text field is cleared. You can stop this by calling event.preventDefault() under where it recognizes the "enter" key being pressed.

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. I was not able to replicate your newline/space error, however it may have something to do with the event not cancelling like above.

Here is the code snippet to try yourself:

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>

You should change the textarea element to a text input

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

This should get rid of the weird newline and spaces. You should also note that there is automatically a space at the end of your original paragraph due to you adding a newline after "dank daniel for life" :).

P.S I'm still a little confused as to why you don't want the text appended on a new line because it's a terminal but good luck with whatever your doing

Hope this helps!

To prevent the newline from being added you need to call event.preventDefault() just after resetting the textarea.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

HTMLCSSJavascript Command Line-Like Interface - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)