确保表单不会在输入时提交，而是运行函数

Question

我认为我理解“按钮”应该是实现我想要的结果的正确方法；不知何故，它们应该与提交按钮不同。但是我不明白如何得到我想要的结果。

我有以下：

<form action="http://www.google.com">
    <input type="text" id="box1">
    <button id="button1" onclick="myFunction()">Submit</button>
</form>

如果用户单击该按钮，该函数将正确运行。 （该函数最终从 box1 中提取值）并对其进行处理）。但是，如果当用户将光标放在文本框内时，他们按键盘上的 Enter 键，表单就会提交并链接到 google。

我怎样才能使在 box1 中按 enter 不会更改页面，而是运行 myFunction？

Answer 1

添加适当的事件处理程序并改为监听提交事件

<form action="http://www.google.com" id="myForm">
    <input type="text" id="box1">
    <button id="button1">Submit</button>
</form>

<script type="text/javascript">
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault();

        myFunction()

    }, false);
</script>

FIDDLE