网页中表单按回车就自动提交的问题总结

最新推荐文章于 2023-12-12 16:43:11 发布

原创最新推荐文章于 2023-12-12 16:43:11 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #表单 #回车响应

前端专栏收录该内容

15 篇文章

订阅专栏

本文探讨了HTML表单中不同元素如何影响回车键的行为。重点介绍了在不同情况下（如单个输入框、多个输入框及不同类型的按钮存在时）回车键的功能变化，并提供了解决单输入框自动提交问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当form表单中只有一个输入框时，焦点在此输入框中，按回车键将自动将表单提交。

<form action="http://www.baidu.com">
       <input type="text">
</form>

即使不写action，页面也会自动刷新，有时这并不是我们需要的。

如果再次添加一个input框，会怎样？

<form action="http://www.baidu.com">
       <input type="text"><br>
       <input type="text">
</form>

焦点在输入框中，按回车键没有提交表单。

如果表单中添加一个submit类型的按钮呢，会怎样？

 <form action="http://www.baidu.com">
        <input type="text"><br>
        <input type="text"><br>
        <input type="submit" value="提交">
    </form>

焦点在输入框中，按回车表单竟然自动提交了。

如果表单中增加一个button类型的按钮，会怎样？

<form action="http://www.baidu.com">
        <input type="text"><br>
        <input type="text"><br>
        <input type="button" value="提交">
    </form>

焦点在输入框中，按回车键没有提交表单。

上面表述的现象，其实是浏览器帮我们做了处理，这里总结一下：

1、如果表单中有一个type=“submit”的按钮，不管输入框有几个，回车键生效。

2、如果表单中只有一个type=“text”的input，不管按钮是什么type，回车键生效。

3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。

4、其它表单元素如textarea、select、radio、chekbox不影响上述触发规则，但这些元素本身在FX下会响应回车键，在IE下不响应。

在这说一下，怎样解决单输入框按回车自动提交的问题。

1）隐藏一个输入框

<form action="http://www.baidu.com">
        <input type="text"><br>
        <input type="text" style="display: none;">
    </form>

2）添加一个onkeydown事件，禁用回车响应

 <form action="http://www.baidu.com">
        <input type="text" onkeydown="if(event.keyCode==13) return false;"/>
    </form>