时间戳

首页 > 解决方案 > 按下回车键时移动 + 提交输入

javascript - 按下回车键时移动 + 提交输入

问题描述

我正在使用 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>

标签： javascriptjqueryhtmlcss

解决方案

你可以这样做：

$(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>

推荐阅读