最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

HTMLCSSJavascript Command Line-Like Interface - Stack Overflow

programmeradmin0浏览0评论

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! :)

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! :)

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

3 Answers 3

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.

发布评论

评论列表(0)

  1. 暂无评论