Form表单按回车自动提交表单的实现方法_javascript技巧

1.form表单中只有一个input标签,按回车键将自动提交表单

当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交。

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
</form>

如果不想让其自动提交可以这样做:

再添加一个<input type="text"/>按下回车将不会自动提交,但是页面上显示一个不知所云的输入框挺别扭,后从网上搜到两个解决办法:

(1) 添加一个<input type='text' style='display:none'/>不显示输入框,然后回车之后也不会提交:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' />
<input style='display:none' />
</form>

(2) 添加一个onkeydown事件,然后回车之后也不会显示:

<form id='form1' action='a1.jsp' method='post'>
<input type='text' name='name' onkeydown='if(event.keyCode==13) return false;'/>
</form>

ps: 我对于这个 event.keyCode==13表示没有看懂,只是理解为判断条件,但具体还是不懂.如果阁下明白,还请不吝赐教.

如果想添加回车事件,可以在onkeydown事件中添加判断提交表单:

<form id='form1' action='a1.jsp' method='post'>
<input style='display:none' />
<input type='text' name='name' onkeydown='if(event.keyCode==13){gosubmit();}' />
</form>

2.关于是否需要自动提交

我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:

如果表单里有一个type=”submit”的按钮,回车键生效。

如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。

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

其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FX下会响应回车键,在IE下不响应。

type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

以上所述是小编给大家介绍的Form表单按回车自动提交表单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索按回车提交表单
表单自动提交
input按回车提交表单、按回车提交表单、javascript 表单提交、javascript中提交表单、ajax提交form表单,以便于您获取更多的相关知识。

时间: 2024-08-03 09:04:53

Form表单按回车自动提交表单的实现方法_javascript技巧的相关文章

如何防止INPUT按回车自动提交表单FORM_javascript技巧

form中的input只有一个,input获得焦点时按回车会form自动提交: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form action="http://blog.csdn.net/gnail_oug" method=&qu

JS定义网页表单提交(submit)的方法_javascript技巧

本文实例讲述了JS定义网页表单提交(submit)的方法.分享给大家供大家参考.具体如下: 这段代码表示网页表单提交时不是提交到指定的页面,而是执行一个特定的函数 <script> function saveInfo() { localStorage.setItem("name",$("#name").val()); } </script> <form id=register onSubmit="return saveInfo

javascript实现表单提交后,提交按钮不可用的方法_javascript技巧

本文实例讲述了javascript实现表单提交后,提交按钮不可用的方法.分享给大家供大家参考.具体如下: 这里使用javascript控制表单提交后,提交按钮不可用,可以防止用户多次提交. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>表单提交后按钮禁用</title> &l

js简单实现表单中点击按钮动态增加输入框数量的方法_javascript技巧

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

关于使用 jBox 对话框的提交不能弹出问题解决方法_javascript技巧

jBox 是个不错的对话框组件. 在 ASP.NET Form 中使用 jBox 的时候,在按钮注册的客户端点击事件中,会发现不能弹出对话框问题. 表现为页面一闪就提交了,导致对话框一闪而过,甚至根本看不到.导致模式对话框失败. 首先,按钮会有默认处理,对于普通的 ASP.NET 按钮来说,会导致表单的提交,提交表单导致了页面的刷新.所以,为了不提交表单,就需要阻止按钮默认的行为,这可以通过下面的代码实现. 复制代码 代码如下: function stopDefault( e ) { // Pr

JSP防止网页刷新重复提交数据的几种方法_javascript技巧

本篇文章主要介绍了网页如何防止刷新重复提交与如何防止后退的解决方法,具体如下: 提交后禁用提交按钮(大部分人都是这样做的) 如果客户提交后,按F5刷新怎么办? 使用Session 在提交的页面也就是数据库处理之前: if session("ok")=true then response.write "错误,正在提交" response.end end if 数据处理完后,修改session("ok")=false. 数据处理成功马上Redirec

JS输入用户名自动显示邮箱后缀列表的方法_javascript技巧

本文实例讲述了JS输入用户名自动显示邮箱后缀列表的方法.分享给大家供大家参考.具体如下: 以下是代码,保存到html文件打开: 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>输入用户名自动显示邮箱后缀列表</title> <script type="text/javascript" src=&q

JS实现n秒后自动跳转的两种方法_javascript技巧

本文实例为大家分享了JS实现n秒后自动跳转的两种方法,供大家参考,具体内容如下 第一种使用SetInterval: $(function () { setInterval(ChangeTime, 1000); }); function ChangeTime() { var time; time = $("#time").text(); time = parseInt(time); time--; if (time <= 0) { window.location.href = &q

javascript为按钮注册回车事件(设置默认按钮)的方法_javascript技巧

本文实例讲述了javascript为按钮注册回车事件(设置默认按钮)的方法.分享给大家供大家参考.具体如下: 首先不得不说,在JS方面,自己真的是个不折不扣的菜鸟.对于JS以及一些JS框架如JQuery等JS框架,自己也只是处在简单应用的阶段,当然自己也在不断的学习当中,希望将来能跟大家分享更多JS方面的心得.今天先来点开胃的,说一下如何设置一个默认按钮,就是不管焦点在不在按钮上,只要按下回车,就等于触发了按钮的单击事件. 代码非常简单,要完成这个功能,只需几行代码: //为keyListene