jquery按回车键实现表单提交的简单实例

本文章在给大家介绍在用户输入完信息之后直接按回车进行表单提交的jquery实现方法，有需要了解的朋友可进来参考以。

键盘事件有3：

jquery键盘事件参考：

1、keydown()

keydown事件会在键盘按下时触发.

2、keyup()

keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

3、keypress()

keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

正确代码为：

$(document).keyup(function(event){
 if(event.keyCode ==13){
  $("#submit").trigger("click");
 }
});

推荐：keyup，防止笔记本键盘不小心触摸到了

1.有些文档中有写成这样：

$(window).keydown（function(){
...
}）

XP系统IE6下是不成功的。

2.还有INPUT的

$("input").keydown（function(){
...
}）

这种情况要在input获取焦点时候，才能监听到键盘事件。

例表单如下：

<form name="loginform" id="loginform" method="post">
 <div>
   <p>用户名：<input type="text" name="username" /></p>
   <p>密码：<input type="password" name="password" /></p>
   <p><input type="button" value="" class="log_btn" /></p>
 </div>
</form>

juqery实现方法：

$("#loginform").keydown(function(e){
 var e = e || event,
 keycode = e.which || e.keyCode;
 if (keycode==13) {
 $(".log_btn").trigger("click");
 }
});

以上这篇jquery按回车键实现表单提交的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jsp中如何实现按下回车键自动提交表单

    为了省事很多时候希望可以按回车键来提交表单,要控制这些行为,可以借助JS来达到要求. 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="../../common/include_tag.jsp"%> <%@ include fi

  • javascript 回车键触发表单提交的问题

    比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交. 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则: 如果表单里有一个type="submit"的按钮,回车键生效. 如果表单里只有一个type="text"的input,不管按钮是什么type,回车键生效. 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=bu

  • jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)

    键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上.在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为负数的时候,在使用Tab键的时候就不会获得焦点). 键盘事件可以传

  • JSP中的FORM表单中只有一个input文本时，按回车键将会自动提交表单

    一个列表界面只有一个输入框查询条件,当首次进入在输入框中输入汉字后,按回车键发现输入框中汉字变成乱码!本以为一个很简单不过的问题,结果却花了好久才找到原因(据说是浏览器问题),按回车后执行了两次查询. 1.未修改前代码: <form id="ff" name="ff" method="post"> <input type="text" id="userName" name="us

  • Jquery响应回车键直接提交表单操作代码

    事情是这样的,做了一个登陆页面,把 Form 去了,直接拿 Jquery 的 Ajax 跟服务器交互,但是这样的话 浏览器就不会默认响应 回车键提交数据了.索性让 Jquery 也接管 回车键的响应吧: 复制代码 代码如下: $("#loginbox input[type='submit']").click(function() {     //Ajax 与服务器交互验证 }); $('#loginbox').keydown(function(e){     if(e.keyCode

  • 禁止按回车键提交表单的方法

    出现自动提交的情况,有两种可能: 一是编写了javascript代码,当用户点按Enter键时,通过js事件侦听机制触发表单的提交. 二是利用了浏览器的默认行为(至少发现ie是这样的).浏览器在解析网页的时候,有许多默认的行为,例如如果一个页面上有表单和一个提交按钮,那么打开页面时,焦点会自动落在这个提交按钮上面.同样如果一个表单中只有一个单行文本输入域(text),那么在这个输入域中按Enter键时,浏览器会自动提交该表单. 我们对于第一种情况一般都知道而且很容易理解,但是对于第二种浏览器的默

  • 没有form表单情况下敲回车键提交表单的js代码

    function enterPress(e) { if (e.keyCode == 13) { login(); } } function login(){ //登录验证等 alert('login'); } Username: Password: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • jquery按回车键实现表单提交的简单实例

    本文章在给大家介绍在用户输入完信息之后直接按回车进行表单提交的jquery实现方法,有需要了解的朋友可进来参考以. 键盘事件有3: jquery键盘事件参考: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 正确代码为: $(document).keyup(function(event){ if(

  • AJAX PHP无刷新form表单提交的简单实现(推荐)

    ajax.php: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script language="javascript"> function saveUserInfo() { //获取

  • vue axios 表单提交上传图片的实例

    项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的  multipart/form-data    接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag

  • php表单提交与$_POST实例分析

    php表单提交与$_POST实例分析

    本文实例分析了php的表单提交与$_POST.分享给大家供大家参考.具体如下: 这里要注意:表单 checkbox 的 name 需要以数组形式来命名. 表单文件:index.php 复制代码 代码如下: <form action="b.php" method="post"> 用户名:<input type="text" name="username"><br /> 密码:<input

  • Javascript和Java获取各种form表单信息的简单实例

    大家都知道我们在提交form的时候用了多种input表单.可是不是每一种input表单都是很简单的用Document.getElementById的方式就可以获取到的.有一些组合的form类似于checkbox或者radio或者select我们如何用javascript获取和在服务器中获取提交过来的参数呢?多说无用.上代码: Jsp-html代码: 复制代码 代码如下: <form action="input.do" name="formkk">   &

  • jquery禁止回车触发表单提交

    复制代码 代码如下: <form class="form-inline definewidth m20" action="/" method="get">              <input type="text" name="title" id="title"class="abc" value="">         

  • 点击表单提交时出现jQuery没有权限的解决方法

    今天遇到个问题 我点击表单提交的时候会出现 jQuery 没有权限 : 百度了一堆都是说 jquery跨域之类的原因,比对项目,发现没有这样的原因:但是还是受到其中的启发,使用json可以防止这类问题,但是他们提供的办法都比较复杂,需要改前台和后台. 试了一下jquery自带的json方式提交成功! $.post("actionName.action",{"id":值,"name":值}, function(data){ if(data==&qu

  • jQuery select表单提交省市区城市三级联动核心代码

    jQuery select表单提交省市区城市三级联动核心代码

    jQuery select表单提交省市区城市三级联动,引用的是"jquery-1.7.min"类库,地区码查询地区名用数组存在AreaData_min,下面摘要部分代码: SelectArea.htm文件 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

  • jquery实现ajax提交表单信息的简单方法(推荐)

    最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习jquery,基本上是现学现找,有点困难. 主要是扩展和拼接json转对象 很简单,附上代码: ; (function ($) { $.fn.ajaxForm = function (options) { var defaults = { modelname: 'model',//后台对象接收名称 url: '/',//提交地址 postType: 'POST',//提交方式 dataType:

随机推荐