显示用户在正文中输入的内容

Question

我有一个代码，我希望在用户在 textfield 中输入内容并按回车键后，他输入的内容会出现在屏幕上。但我做不到，我想在这里得到一些帮助。

<!DOCTYPE html>
<html>
<head>
<title>Tasks for the day</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

alert("When you have finished your task you only have to click on it.");

$(document).ready(function(){
$("p").click(function(){
    $(this).hide();
});
});

$(document).keypress(function(e) {
if(e.which == 13) {

}
});

function showMsg(){
 var userInput = document.getElementById('userInput').value;
  document.getElementById('userMsg').innerHTML = userInput;
}

</script>
</head>
<body>

<h1>Tasks to do</h1>

<p>Type what you need to do:</p>

<input type="input" id="userInput" onkeyup=showMsg() value="" />
<p id="userMsg"></p>

</body>
</html>

Answer 1

it only adds one value to the screen, to put more than one, do I need to create an array

您的主要组件正常工作。即，您正在更新屏幕。要让它仅在 enter 上更新，只需将代码放入 keypress 处理程序
要将值附加到屏幕（在多个 enter 的情况下），将当前 innerHTML 与值

$(document).ready(function() {
  $("p").click(function() {
    $(this).hide();
  });
});

$('#userInput').keypress(function(e) {
  if (e.which == 13) {
    var userInput = document.getElementById('userInput').value;
    var innerHTML = document.getElementById('userMsg').innerHTML;
    innerHTML = innerHTML || '';
    document.getElementById('userMsg').innerHTML += innerHTML + userInput;
  }
});

<title>Tasks for the day</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<h1>Tasks to do</h1>

<p>Type what you need to do:</p>

<input type="input" id="userInput" onkeyup=showMsg() value="" />
<p id="userMsg"></p>

显示用户在正文中输入的内容

Show what the user typed in the body

javascript

jquery

events

event-handling