0

端末シェルのようなページを作ろうとしています。

jsfiddle で私のコードを参照してください。

http://jsfiddle.net/paopaomj/qGw4Q/9/

入力ラインは、出力よりも行の高さが高いようです。試してみて、何かを入力して、何を入力するかを入力してください。

ありがとう。

html:

<body>
<div id="output"></div>
<div id="input"> 
    root@host
    <input type="text" id="command" />
</div>

JavaScript:

$("#command").keyup(function (e) {
    if (e.keyCode == 13) {
        submit();
    }
});

var submit = function () {
    var commandEl = document.getElementById("command");
    var command = commandEl.value;
    var outputel = document.getElementById("output");
    var new_row = document.createElement("div");
    new_row.innerHTML = "root@host " + command;
    outputel.appendChild(new_row);
    commandEl.value="";
};
4

2 に答える 2

2

入力にはいくらかのパディングがありました。追加

padding:0px; 
margin-left:-1px;

入力CSSに

于 2013-08-27T07:41:56.130 に答える
0

わかった。入力フィールドにmargin=0、iutput divにmargin-top=0、出力divにmargin-bottom=0を設定することで、最終的に解決しました。

#output { margin-bottom: 0px; background-color: #000000; }
#input { margin-top: 0px; background-color: #000000; }

input {
    border: 0;
    background: #000000;
    color: #00FF00;
    outline: none;
    font-family:'Rosario', sans-serif;
    font-size: 16px;
    padding: 0px;
    margin-left: -0.1px;
    margin: 0px;
}

ヨハンの助けをありがとう！

于 2013-08-27T12:46:46.867 に答える