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

事情是这样的，做了一个登陆页面，把 Form 去了，直接拿 Jquery 的 Ajax 跟服务器交互，但是这样的话 浏览器就不会默认响应 回车键提交数据了。索性让 Jquery 也接管 回车键的响应吧：

代码如下:

$("#loginbox input[type='submit']").click(function() {
    //Ajax 与服务器交互验证
});
$('#loginbox').keydown(function(e){
    if(e.keyCode == 13){
        //模拟点击登陆按钮，触发上面的 Click 事件
        $("#loginbox input[type='submit']").click();
    }
});

如果使用keydown的话，IE6可能无效，解决方法请接着往下看

键盘事件有3：

keydown，keypress，keyup，分别是按下，按着没上抬，上抬键盘 。

正确代码为：

代码如下:

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

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

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

代码如下:

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

XP系统IE6下是不成功的。

2.还有INPUT的

代码如下:

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

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

赞 (0)

相关推荐

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

    出现自动提交的情况,有两种可能: 一是编写了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需刷新才能执行]

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

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

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

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

  • 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按回车键实现表单提交的简单实例

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

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

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

  • thinkPHP5 ajax提交表单操作实例分析

    本文实例讲述了thinkPHP5 ajax提交表单操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <

  • PHP使用HTML5 FormData对象提交表单操作示例

    PHP使用HTML5 FormData对象提交表单操作示例

    本文实例讲述了PHP使用HTML5 FormData对象提交表单操作.分享给大家供大家参考,具体如下: 这是HTML5中新增的一个Api,他能以表单对象作为参数,自动的把表单的数据打包,当ajax发送数据时,发送这个FormData对象,以达到发送表单数据的目的. 创建: 参数是一个form节点对象 var fm = document.getElementById('formid'); var fd = new FormData(fm); 优点: (1)在以往的ajax做post请求时,当提交的

  • Jquery操作radio,checkbox,select表单操作实现代码

    Jquery操作radio,checkbox,select表单操作实现代码

    一 .Select jQuery获取Select选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#s

  • jQuery Validator验证Ajax提交表单的方法和Ajax传参的方法

    serialize() 方法通过序列化表单值,创建 URL 编码文本字符串.代替了一个一个传参的方式 以往写的ajax传参方式 $.ajax({ url : "${ctx}/SJStandardDamPartition/insertOrUpdateDamPartition", type : "post", dataType : "json", data: {beginsectionid:function(){ return $('#number

  • jquery.form.js异步提交表单详解

    本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">

  • jQuery ajaxSubmit 实现ajax提交表单局部刷新

    AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

  • jquery+ajax实现直接提交表单实例分析

    jquery+ajax实现直接提交表单实例分析

    本文实例讲述了jquery+ajax实现直接提交表单的方法.分享给大家供大家参考,具体如下: 这里给出查看帮助文档的例子 <script src="jquery-1.4.4.js"></script> <script> $(function(){ $("#results").append( "<tt>" + $("form").serialize() + "</t

  • jQuery基于Ajax方式提交表单功能示例

    本文实例讲述了jQuery基于Ajax方式提交表单功能.分享给大家供大家参考,具体如下: 提交表单一般通过同步的方式提交,提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果.如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理,那么页面不能整体刷新,这时第一想到的就是采用ajax的方式提交表单.下面完整的介绍一个表单采用ajax方式提交的流程. 一.准备 1.页面引入jQuery文件 2.页面引入jQuery的表单插件jQuery.form.js 二.实施 1.页面中的表单 <

随机推荐