这些是我的文件：
.dir {
color: white;
font-family: "Lucida Console", Monaco, monospace;
font-size: 16px;
}
.cmdline {
font-family: "Lucida Console", Monaco, monospace;
background-color: black;
border: 1px solid black;
color: white;
font-size: 16px;
width: 100%;
}
.cmdline:focus {
outline: none !important;
border: 1px solid black;
}
.blink_text {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
color: white;
}
@-moz-keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@-webkit-keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}<!DOCTYPE html>
<!--<>-->
<!--<ink rel="stylesheet" type="text/css" href="interface.css">-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!--</>-->
<body style="background-color:black;">
<span class="dir">~/Link/Hydrogen/Helium/Lithium></span>
<input class="cmdline" autofocus>
<input type="submit" style="visibility: hidden;" />
</body>忽略评论。。。那么，我该如何让它在输入命令时打印一些内容呢？类似于telehack.com吗？我也有一个问题，我似乎无法在与span、p或div相同的行中进行100%宽度的输入。提前感谢
您的第二个问题
为了将输入字段放在目录旁边，我将它们都封装在<table>:中
CSS
.intable {
width: 100%;
}
HTML
<span id="output" class="dir"></span>
<form id="inform" autocomplete="off">
<table class="intable">
<tr>
<td>
<span class="dir" id="directory">~/Link/Hydrogen/Helium/Lithium></span>
</td>
<td style="width: 100%">
<input class="cmdline" id="inbox" autofocus>
</td>
</tr>
</table>
<input type="submit" style="visibility: hidden;" />
</form>
（我很快会解释<form>）
您的第一个问题
获取输入
我把它全部放在一个表格中的原因是这样检索输入就很容易了：
$(document).ready(function() {
$("#inform").submit(function(e) { //Listen for the user to enter text
e.preventDefault(); //Keep page from reloading
var input = $("#inbox").val(); //get entered text
$("#inbox").val(""); //I assume you want to blank this out afterwards
printSomething(input); //Process input and print to page
});
});
打印输出
我添加了<span id="output" class="dir"></span>，这样就有了编写输出的地方。
function printSomething(input)
{
//Put the directory text + user's input at head of output
var output = $("#directory").html() + input + "<br />";
//Replace this bit with your own processing
if(input.length > 0)
{
output += "You entered: " + input;
} else {
output += "You didn't enter anything!"
}
//So that directory will be on newline, because span does not automatically do that
output += "<br />";
//ADD the new content to the output
$("#output").append(output);
}
$(document).ready(function() {
$("#inform").submit(function(e) {
e.preventDefault(); //Keep page from reloading
var input = $("#inbox").val(); //get entered text
$("#inbox").val(""); //I assume you want to blank this out afterwards
printSomething(input);
});
});
function printSomething(input) //You were a little vague...
{
var output = $("#directory").html() + input + "<br />";
//Replace this bit with your own processing
if (input.length > 0) {
output += "You entered: " + input;
} else {
output += "You didn't enter anything!"
}
output += "<br />";
$("#output").append(output);
}.dir {
color: white;
font-family: "Lucida Console", Monaco, monospace;
font-size: 16px;
}
.cmdline {
font-family: "Lucida Console", Monaco, monospace;
background-color: black;
border: 1px solid black;
color: white;
font-size: 16px;
width: 100%;
}
.cmdline:focus {
outline: none !important;
border: 1px solid black;
}
.blink_text {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
color: white;
}
.intable {
width: 100%;
}
@-moz-keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@-webkit-keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
@keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<body style="background-color:black;">
<span id="output" class="dir"></span>
<form id="inform" autocomplete="off">
<table class="intable">
<tr>
<td>
<span class="dir" id="directory">~/Link/Hydrogen/Helium/Lithium></span>
</td>
<td style="width: 100%">
<input class="cmdline" id="inbox" autofocus>
</td>
</tr>
</table>
<input type="submit" style="visibility: hidden;" />
</form>
</body>