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

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

我有以下资料：

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

提交

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

---

如何使在框1中按enter键不会更改页面，而是运行myFunction？

添加适当的事件处理程序并侦听submit事件

<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>

提交
document.getElementById（'myForm'）。addEventListener（'submit'，函数（事件）{
event.preventDefault（）；
myFunction（）
}，假）；

---

你想用javascript编写，还是用jQuery也可以？为了确保按钮不会提交页面，你知道为什么这些代码在FIDDLE中对我有效，但在实际测试环境中对我无效吗？在我的测试环境中，当我点击按钮或点击回车键时，我被引导到谷歌。我真的很沮丧，希望能得到任何帮助。这里既有指向我的小提琴的链接，也有指向我在notepad++中的代码的imgur快照的链接。Fiddle:Imgur：您是否像我的示例中那样将脚本放在DOM中的元素之后？我没有，现在我更改了它的工作方式。非常感谢你。您是否介意链接我或给我一个简短的解释，说明为什么这是必要的。所有元素都会在DOM中遇到时进行计算，包括脚本标记。当脚本标记出现在元素之前时，元素还不存在，因此

getElementById

失败，因为DOM中还没有元素，它出现在后面。因此，要么将脚本标记放在元素之后，要么使用DOM就绪处理程序，

window.onload

或类似的方法等待在脚本运行之前加载所有元素。