jQuery代码:jQuery控制表单里的回车键

默认情况下,在表单(form)的输入框(input)里按回车将会提交(submit)表单。这会造成一个问题:当用户在填写表单时不小心按了回车键(特别是输入框含有历史记录时,这种情况经常发生),这时不完整的表单会被提交。我们可以通过Javascript来屏蔽回车键,这样当用户键入回车键,表单就不会被提交,而且我们还可以根据需要执行别的任务,例如把光标移到下一个输入框。这样不但屏蔽了回车键误提交表单,而且还方便了用户,一举两得!

jQuery代码如下:

<script type="text/javascript">
$(document).ready(function(){
$("input").keypress(function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
if (keyCode == 13){
var i;
for (i = 0; i < this.form.elements.length; i++)
if (this == this.form.elements[i])
break;
i = (i + 1) % this.form.elements.length;
this.form.elements[i].focus();
return false;
}
else
return true;
});
});
</script>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索form
, 表单
, this
, elements
, keycode
, jquery表单
, Form.elements
, 回车键
, input回车提交表单
, 按回车提交表单
, jquery捕捉回车键
, jQuery步骤表单
Jquery回车提交
,以便于您获取更多的相关知识。

时间: 2024-08-19 06:23:34

jQuery代码:jQuery控制表单里的回车键的相关文章

jquery控制表单输入框显示默认值的方法

  本文实例讲述了jquery控制表单输入框显示默认值的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <!DOCTYPE html> <html> <head> <script language="javascript" src=&quo

jquery控制表单输入框显示默认值的方法_jquery

本文实例讲述了jquery控制表单输入框显示默认值的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script language="javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document)

jquery实现的用户注册表单提示操作效果代码分享_jquery

本文实例讲述了jquery实现的用户注册表单提示操作效果.分享给大家供大家参考.具体如下: jQuery实现的用户注册表单上方弹窗提示文字特效源码,是一段不仅可以在输入的表单上方提示注意事项,同时也可以进行输入验证的代码,是一款非常实用的特效代码,值得大家学习. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分

jQuery实现的漂亮表单效果代码_jquery

本文实例讲述了jQuery实现的漂亮表单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的漂亮的表单效果,将表单的输入框换成了横线,加入了背景,引入了jQuery插件,样式上特别漂亮,是一个值得借鉴的jQuery表单美化实例,而且本表单在布局上完全是基于纯CSS标签来实现,使用了CSS中的fieldset来制作表单,兼容性好. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-input-style-

Jquery.Form 异步提交表单的简单实例

 这篇文章主要介绍了Jquery.Form 异步提交表单的简单实例.需要的朋友可以过来参考下,希望对大家有所帮助 http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#   1. 在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记:    代码如下: <form id="myForm" method="post" action="/Home/AjaxFor

jQuery Validate插件实现表单强大的验证功能_jquery

jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 第一节:jQuery Validation让验证变得如此容易 一.官网下载jquery,和jquery validation plugin 二.引入文件 <script src="js/jquery-1.8.0.min.js" type="text/javascr

jQuery ajax提交Form表单实例(附demo源码)_jquery

本文实例讲述了jQuery ajax提交Form表单的方法.分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form代码如下: <form id="Form1" action="action.aspx" method="post" > 名称:<input

jQuery提交多个表单的小例子

这篇文章介绍了jQuery提交多个表单的小例子,有需要的朋友可以参考一下   复制代码 代码如下: <script type="text/javascript"> $(function(){ $("#btnSubmit").click(function(){ $("form[name='form1']").submit(); $("form[name='form2']").submit(); }) }) </

jQuery获取和设置表单元素的方法

 本篇文章主要对jQuery获取和设置表单元素的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 jQuery提供了val()方法,使用它我们可以快速地获取和设置表单的文本框.单选按钮.以及单选按钮的值. 使用val()不带参数,表示获取元素的值 使用val()给定参数,则表示把值赋给元素   如下:     代码如下: //获取值 alert($("input#mytextbox").val()); alert($("select#mylist").v