我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。
要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1. 如果表单里有一个type=”submit”的按钮，回车键生效。
2. 如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
3. 如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FX默认为type=submit。
4. 其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FX下会响应回车键，在IE下不响应。
5. type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。
6.我们在处理表单的页面可以检验他是否点击了按钮来控制下面的程序。if($_POST['submit']){ 如果点击了按钮 程序继续}
实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办 呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。
通过以上可知只要把type="submit"改成type="button"然后js提交， 在不要有一个type=”text”的input就行了。就不会发生回车跳转。
但实验发现，ie和火狐不一样，火狐的submit按钮有掩藏的（display：block）和显现的都不行，必须全改，但ie只要显现的没有submit就行了。
<!DOCTYPE html> <html> <head> <meta charset="gb18030" /> <meta http-equiv="Content-Type" content="text/html; charset=gb18030" /> <title>HTML 5 gb18030编码格式</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> function doSubmit() { alert("XXXXXXXXX"); return false; } //监听回车 /* $(document).ready(function() { $(document).keydown(function(e) { if (e.keyCode == 13) { alert("xxxxNX"); } });<input type="submit" value="submit" /> });*/ </script> <form onsubmit="return doSubmit();" method="post" action=""> <input type="text" /> <input type="button" value="button" /> <input type="text" style="display:none" value="此处的input删掉然后回车按钮就会触发提交" /> </form> </body> </html>
相关推荐
本文将详细介绍如何防止`<input>`按回车键自动提交`<form>`表单。 首先，我们来看一下问题的示例代码： ```html <!doctype html> <html> <title>test <form action=...
在实际开发中，考虑到不同浏览器的兼容性和用户习惯，开发者需要谨慎处理回车提交事件，确保功能的稳定性和用户体验的一致性。同时，利用源码分析工具，如提供的`submit.html`文件，可以帮助我们更深入地理解和调试...
在网页开发中，用户按下回车键通常会触发表单的提交操作，这在某些情况下可能会导致意外的结果，比如在搜索框中按回车可能会刷新整个页面。本文将详细讲解如何禁止用户通过回车键来提交表单，以避免这种不必要的行为...
在网页开发中，"网页 按ctrl+回车提交" 是一种常见的用户交互功能，它允许用户在填写表单后通过按下键盘上的Ctrl+Enter组合键来快速提交信息，而不是仅依赖于点击按钮。这一功能可以提升用户体验，特别是在处理大量...
### 没有form表单情况下敲回车键提交表单的JS代码 在Web开发中，表单是用户与网站交互的重要方式之一。通常情况下，表单通过`<form>`标签来定义，并且可以通过点击按钮或者按下回车键来提交表单数据。但在某些特殊...
### 知识点详解 #### 一、表单提交机制 ...HTML负责构建表单界面，JavaScript用于监听键盘事件并提交表单，而Java则在后端处理提交的数据。这种技术组合在现代Web开发中非常常见，也是学习Web开发的基础之一。
在网页开发过程中，一个常见的需求是当用户在文本框中按下回车键时，自动触发表单提交。这种功能在多种浏览器中实现的方式可能有所不同，尤其是对于IE（Internet Explorer）和Firefox这两种主流浏览器。本文将深入...
在Web开发中，我们经常需要为用户提供更友好的交互体验，其中一个常见的需求就是允许用户通过按下回车键来提交表单。这种方法可以提高用户体验，并且在很多场景下是非常实用的。 #### 代码解析： ```javascript ...
在HTML中，可以通过监听键盘事件来实现文本框的回车提交。`onkeypress`事件会在用户按下键盘上的键时触发。当检测到用户按下的是回车键（其键码为13）时，我们可以调用一个JavaScript函数来进行提交操作。在示例代码...
如果你只想阻止特定输入框的回车提交，可以在`<input>`元素上设置`onkeypress`事件，返回`false`来阻止提交。例如： ```html ();"> ``` 其对应的JavaScript函数如下： ```javascript function gosearch() { ...
同时，考虑使用`type="submit"`的按钮，这样回车提交的行为会自动触发，无需额外的事件处理。 综上所述，通过在表单的`onsubmit`事件中调用自定义函数并返回`false`，我们可以有效地阻止回车导致的意外页面跳转，...
在JSP中，当一个FORM表单中只有一个INPUT文本输入框时，用户按下回车键，浏览器会默认触发表单的提交动作。这是因为浏览器的默认行为：在一个只有一个单行文本输入域（type="text"）的表单里，按下回车键会模拟点击...
在压缩包中的`ctrl加回车提交.htm`文件很可能包含了上述功能的实现。通过打开并查看这个HTML文件，你可以看到具体的HTML结构和嵌入的JavaScript代码，从而学习如何将"Ctrl + Enter"提交功能应用到实际项目中。 总的...
首先，当一个`<form>`表单中只有一个`<input type="text">`标签时，按下回车键会自动触发表单的提交。这是因为浏览器的默认行为，它将回车键视为提交表单的信号。如果不想让表单在按回车时自动提交，可以采取以下两...
在HTML表单中，有一个非常重要的行为特性，即当表单内只包含单个输入框（比如文本框、密码框等）时，用户在该输入框内按下回车键，浏览器会默认将表单数据提交到form元素的action属性所指定的URL。这个行为是基于...
ASP.NET回车提交事件主要涉及HTML表单以及ASP.NET中对表单提交的处理。在HTML中，当用户在表单内输入时按下回车键，浏览器会寻找表单内的第一个`type=submit`的按钮并触发点击事件，从而提交表单。在ASP.NET框架中，...
时按回车键将会自动将表单提交。 代码如下: <form id=”form1″ action=”post.php” method=”post”> <input type=”text” name=”name” /> </form> 再添加一个 代码如下: <...
为了提高用户体验，表单通常设计为支持快捷操作，例如使用回车（Enter）键提交表单。然而，在某些情况下，如文本输入框之外的地方按下回车键时，可能会导致意外的表单提交，这并不是开发者或用户所期望的行为。因此...