当用户在输入字段上按下回车键时如何运行函数？ [复制]答案

【问题标题】：How to run a function when user presses enter on input field? [duplicate]当用户在输入字段上按下回车键时如何运行函数？ [复制]
【发布时间】：2015-02-11 11:55:00
【问题描述】：

我有一个在提交时生成格式化文本的输入字段。它适用于按钮，但我也希望它在用户按下 Enter 键时起作用。

关于如何实现这一目标的任何想法？另外，当用户单击“添加”按钮时，我想将焦点返回到文本字段。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>

<style>
.HiddenDiv{
color: red;
}
</style>

<script>
var counter = 0; //Prevents user from creating multiple nodes on submit
var limit = 5; //Amount of nodes that can be created per input field


//CREATES FORMATTED NODE FROM INPUT VALUE
function createNode(){
if (counter == limit)  {
//Do nothing
}
else {
var input = document.getElementById('textInput1').value; //Retrieves input
var newText = document.createElement("li"); //Creates the HTML node
newText.innerHTML = input; //Sets the node's value to whatever is in the input

document.getElementById("Form").appendChild(newText); //Adds the node to the div

document.getElementById('textInput1').value=""; //Clears text field after submit
counter++;
}
}

//CLEARS THE FORM IF YOU MADE A MISTAKE
function deleteNode(){
var node = document.getElementById('Form');
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
counter=0;
}
}
</script>
</head>

<body>

<form method="POST">
<input type="text" id="textInput1">
<input type="button" value="Add" onClick="return createNode()">
<input type="button" value="Clear" onClick="return deleteNode()">
</form>

<div id="Form" class="HiddenDiv">
</div>

</body>
</html>

【问题讨论】：

Stack Overflow（以及其他网站）上已经有几篇关于如何识别何时按下 Enter 键的文章。见stackoverflow.com/q/11365632/215552 或stackoverflow.com/q/3777813/215552

标签： javascript html forms

【解决方案1】：

document.getElementById('textInput1').addEventListener('keypress', function (e) {
    if (e.which === 13) {
        e.stopPropagation();
        e.preventDefault();

        alert('Enter pressed');
    }
});

演示：http://jsfiddle.net/p7twLf0v/

【讨论】：

谢谢！这似乎可以独立工作，但是当我将它集成到我的代码中时它不会。有什么线索吗？我非常感谢这里的帮助。 jsfiddle.net/p7twLf0v/1
没关系，我意识到我的标题中有导致问题的代码。