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

我有一个代码，我希望在用户在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>

它只向屏幕添加一个值，要放置多个值，我需要吗创建数组

您有主要组件工作。也就是说，您正在更新屏幕。要使其仅在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>

相关内容

最新更新

热门标签：