我们有时候希望通过敲击回车键在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，我们希望输入完关键词之后直接按回车键来提交表单；而有些复杂的表单，可能要避免回车键的触发行为，否则就会造成误操作。
要控制这些行为，不需要借助 JS，浏览器已经帮我们做好了这些处理，下面总结了几条规则：
1.如果表单里有一个 type="submit" 的按钮，回车键生效；
2.如果表单里只有一个 type="text" 的 input，回车键生效；
3.如果按钮不是用的 input，而是用 button，并且没有加 type，IE 下默认为 type=button，FX 默认为 type=submit；
4.其他表单元素如 textarea、select 不影响。
在实际的应用中，要让表单响应回车键很容易，只要保证表单里有个 type="submit" 按钮就行。而当只有一个文本框又不希望响应回车键该怎么办呢？我的办法有点别扭，就是再写一个无意义的文本框，然后隐藏起来。根据第三条规则，我们在用 button 的时候，尽量显示声明 type 以使浏览器表现一致。
看下面的例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>submit</title>
</head>
<body>
<h1>本demo演示在input框中enter键是否触发提交表单，来自 www.abaonet.com</h1>
<h2>一个表单元素的时候，提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input value="提交" type="button">
</form>
<h2>一个表单元素的时候，不提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input style="display: none;" type="text">
<input value="提交" type="button">
</form>
<h2>一个表单元素的时候，提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input style="display: none;" type="text">
<input value="提交" type="submit">
</form>
<h2>多个表单元素的时候，提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input type="text">
<input value="提交" type="submit">
</form>
<h2>多个表单元素的时候，不提交</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input type="text">
<input value="提交" type="button">
</form>
<h2>用button元素时，FX和IE下有不同的表现</h2>
<form action="http://www.abaonet.com/">
<input type="text">
<input type="text">
<button>提交</button>
</form>
</body>
</html>
分享到：
相关推荐
### JavaScript 按回车键触发按钮提交事件详解 #### 一、背景介绍 在Web应用开发中，特别是在处理表单提交逻辑时，经常会遇到需要对用户输入进行验证的情况。通常，这种验证会通过表单的`onsubmit`事件或者按钮的`...
通常情况下，表单提交通过点击提交按钮触发，但在某些场景下，为了提高用户体验，开发者会选择使用键盘事件（如按Enter键）来触发表单提交。 #### 二、使用Java技术实现表单提交 虽然题目中提到“应用Java技术实现...
### ASP.NET 页面回车触发 Button 按钮方案详解 #### 一、概述 在 Web 开发中，尤其是在 ASP.NET 应用程序中，我们经常需要处理用户输入数据时的操作，比如通过按下 Enter 键来触发某个操作或提交表单。这种需求在...
总的来说，`input[type="submit"]`、`button[type="submit"]` 和回车键都能触发表单提交，但它们各有特点和使用场景。`input[type="submit"]` 更简单但样式受限，`button[type="submit"]` 提供更多定制空间，回车键...
### datagridview 按回车键横向移动文档 #### 知识点解析： 在Windows Forms应用程序中，`DataGridView`控件是用于显示表格数据的一种非常强大的工具。它提供了丰富的功能来展示、编辑和操作数据集。对于某些应用...
在开发用户界面时，一个常见的需求就是允许用户通过按下回车键来提交表单或执行特定操作，例如登录功能。这种设计不仅可以提高用户体验，还能使应用程序更加直观易用。本篇将详细解析如何在Java Swing框架中实现按...
- **定义**：当用户单击主鼠标按钮（通常是左侧按钮）或按下回车键时触发。 - **用途**：常用于实现链接点击、表单提交等交互功能。 - **特点**： - 支持键盘触发（通过回车键），这对于提高网页的可访问性至关重要...
1. **表单提交**：在表单输入框中按下回车键时，自动提交表单。 2. **搜索功能**：在搜索框中按下回车键时，触发搜索请求。 3. **输入提示**：在文本输入框中输入时，按下回车键显示相关提示信息。 4. **实时聊天**...
- `bindsubmit`: 这个属性用于绑定表单的提交事件，当用户点击提交按钮或者按下回车键时，触发对应的事件处理函数，如`formSubmit`。 - `bindreset`: 绑定表单的重置事件，用于清除表单中的所有数据，调用对应的...
同时，我们使用`.keydown()`方法监听键盘事件，当用户按下回车键时，焦点会移动到密码输入框或者触发表单提交。 3. **Ajax提交表单**： 当用户在密码输入框按下回车键，`$("#btnLogin").trigger("click")`模拟点击...
### JS表单二级联动知识点详解 #### 一、概述 在网页开发中，表单是收集用户信息的重要工具之一。为了提升用户体验并增加交互性，开发者常常需要在表单中加入各种高级特效，如二级联动等。所谓**二级联动**，通常指...
但读码器直接发送的数据可能不包含必要的回车或换行字符，导致在需要用户输入的网页表单中无法触发提交操作。 3. **C#编程语言** C#是Microsoft开发的一种面向对象的编程语言，适用于Windows平台。它具有丰富的...
// 模拟回车键 keybd_event(VK_RETURN, MapVirtualKey(VK_RETURN, 0), 0, 0); keybd_event(VK_RETURN, MapVirtualKey(VK_RETURN, 0), KEYEVENTF_KEYUP, 0); end; ``` 这段代码中，通过调用Windows API函数实现了...
在非jQuery方法中，我们在body元素上直接添加了onkeyup事件监听器，当回车键被按下时，调用`autosubmit`函数，提交form表单。 以上两种方法都能有效地实现回车登录的功能，开发者可以根据项目需求和团队习惯选择...
- 触发表单提交； - 显示或隐藏某个元素； - 触发弹窗等交互行为。 **示例代码：** ```javascript // Vue.js 示例 new Vue({ el: '#app', methods: { handleClick() { console.log('点击事件触发'); } } ...
在ASP.NET Web Forms框架中，设置默认按钮是一个常见的需求，特别是在表单中，用户按下回车键时希望触发特定按钮的点击事件。本文将详细解析如何在ASPX页面中设置默认按钮，包括前后端实现机制及代码示例。 ### ASP...
| 13 | Enter | 回车键 | | 16 | Shift_L | 左 Shift 键 | | 17 | Control_L | 左 Ctrl 键 | | 18 | Alt_L | 左 Alt 键 | | 19 | Pause | 暂停键 | | 20 | Caps_Lock | 大写锁定键 | | 27 | Escape | 退出键 | | 32 ...