Question

我正在使用html / css / js（我很新的jQuery）构建命令行界面模拟器，并且每当您按回车键时，我都会尝试将输入和输入框之前的文本移至下一行（就像运行命令时的控制台一样）。我已经做过研究，但是我完全不确定如何去做。关于此操作或关于我的代码的一般提示？这是我的代码：

$(document).ready(function() {
	$(document).keypress(function(e) {
		if(e.which == 13) {
			//alert("ENTER!");
      //Submit input and move everything to the next line
		}
	});
});

html {
	background-color: #000000;
	font-family: Menlo;
}

.console {
	color: #ffffff;
}

.green {
	color: #39ff14;
}

input {
	background: transparent;
	border: none;
	color: #ffffff;
	font-family: Menlo;
	font-size: 15px;
}

p {
	color: #ffffff;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<div class="console">
		<span class="green">usr_501$ </span>
		<input type="input" name="input" id="input" autocomplete="off"><br>
	</div>
</html>

Answer 1

您可以执行以下操作：

$(document).ready(function() {
  $(document).keypress(function(e) {
    if (e.which == 13) {
      $('#submitted').append('<span class="green">usr_501$ </span>' + $('#input').val() + '<br>');
      $('#input').val('');
    }
  });
});

html {
  background-color: #000000;
  font-family: Menlo;
}

.console {
  color: #ffffff;
}

.green {
  color: #39ff14;
}

input {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: Menlo;
  font-size: 15px;
}

p {
  color: #ffffff;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="css/theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="console">
  <div id="submitted"></div>
  <span class="green">usr_501$ </span>
  <input type="input" name="input" id="input" autocomplete="off"><br>
</div>

</html>

按下Enter键时移动并提交输入

1 个答案: