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

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