创建命令界面样式的 HTML 站点答案

【问题标题】：Creating Command Interface Styled HTML Site创建命令界面样式的 HTML 站点
【发布时间】：2020-04-25 02:56:40
【问题描述】：

我一直致力于构建一个网站，其中包含一些基本功能，如果需要，我可以在以后添加这些功能。

我希望用户能够在“在此处输入...”输入框中输入文本，当他们按下 Enter 键时，根据他们刚刚输入的命令在他们的网站上添加一个新行。

例如，如果他们输入“帮助”，它会添加几行新行来解释网站的功能和一些开始的命令。我的想法是继续向其中添加命令，这需要一些可扩展性。我的网站 + 输入框按我的意愿工作。

.headTag {
	background-color: lightgrey;
	display: inline-block;
	width: 100%;
	height: 26px;
}

.topPageTitle {
	color: black;
	font-size: 18px;
	float: left;
	background-color: lightgrey;
	margin-top: 0px;
}

.mainPageText {
	color: black;
	font-size: 18px;
	float: right;
	margin-right:10px;
	margin-top: 0px;
}

.userInput {
	width: 100%;
	position: absolute;
	bottom: 10px;
}

.mainWindow {
	margin-top: 24px;
	font-family: typewriter;
	font-size: 18px;
	color: green;
	width: 100%
}

.mainWindow p {
	margin-top: -18px;
}

input[type=text] {
  width: 100%;
  border: none;
  background-color: black;
  font-size: 18px;
  font-family: typewriter;
  color: green;
  outline: none !important;
}
 

@font-face {
  font-family: typewriter;
  src: url('../assets/typewriter.ttf');
}

body {
	background-color: black;
	font-family: typewriter;
	color: lightgrey;
  background:#000;
}

.easyMenu {
	position: absolute;
	bottom: 5px;
	font-family: typewriter;
	font-size: 18px;
	width: 100%;
}

.easyMenu a {
	color: lightgrey;
	width: 24.5%;
	display:inline-block;
}

.easyMenu a:hover {
	color: black;
	background-color: lightgrey;
}

<html>
<head>
	<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
	<div class="headTag">
		<p class="mainPageText">13.04.2020</p>
	</div>
	<div class="mainWindow">
		<p>system>: Welcome to the Website.</p>
		<p>system>: If you are stuck or don't know what to do type "Help"</p>
	</div>
	<div class="userInput">
		<form>
			<input type="text" autocomplete="off" spellcheck="false" id="fname" name="fname" value ="Type here..." onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">
		</form>
	</div>
	<div class="easyMenu">
		<a>>: Back</a>
		<a>>: Create Private Chat</a>
		<a>>: Join Private Chat</a>
		<a>>: Information</a>
	</div>
</body>
</html>

理想情况下，我想坚持使用纯 HTML+CSS，但如果需要 JS，我很乐意使用它。我也对使用 Python WSGI 执行此操作的想法持开放态度，但不确定是否开始此操作。

非常感谢任何帮助/建议。

亲切的问候詹姆斯

【问题讨论】：

您需要 JavaScript 在他们按下 Enter 时采取行动。
使用placeholder 属性在输入字段中显示一个临时字符串。

标签： javascript python php html css

【解决方案1】：

您需要使用 Javascript 使其工作：您需要使用 appendChild js 命令使其工作 (https://www.w3schools.com/jsref/met_node_appendchild.asp)
[编辑]
要恢复链接上所说的内容，您应该使用 appendChild javaScript 属性，该属性允许您从 javascript 代码在页面上添加文本：

function getCommand(input){
    if (input == "help"){
        let p = document.createElement("p"); //creates a new <p> element
        let text = document.createTextNode("Text you want to show");
        p.appendChild(text); // adds the text to the paragraph
        document.body.appendChild(p); // adds <p> to the body of your page
    }
    else {
        let p = document.createElement("p"); //creates a new <p> element
        let errorText = document.createTextNode("Invalid Command.");
        p.appendChild(errorText); // adds errorText to the <p> element
        document.body.appendChild(p);
    }
}

希望我的回答能帮助你，
罗曼。

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
好的，谢谢您的建议。我按照你的要求修改了答案。