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

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 个解决方案

解决方案1
0 已采纳 2018-12-07 00:58:44

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-12-07 00:58:44

解决方案1
0 已采纳 2018-12-07 00:58:44