Question

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

我有以下内容：

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

如果用户单击该按钮，则该功能可正常运行。（该函数最终从box1中提取值）并对其执行某些操作）。但是，如果用户将光标放在文本框中，他们会在键盘上输入，表单会提交并链接到谷歌。

我怎样才能这样做，以便在box1中输入不会改变页面，而是运行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

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

1 个答案: