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


Posted in Javascript onJuly 25, 2014

事情是这样的,做了一个登陆页面,把 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获取焦点时候,才能监听到键盘事件。
Javascript 相关文章推荐
lib.utf.js
Aug 21 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
js 实现 input type="file" 文件上传示例代码
Aug 07 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
Javascript闭包实例详解
Nov 29 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 #Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 #Javascript
js星星评分效果
Jul 24 #Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 #Javascript
js创建对象的区别示例介绍
Jul 24 #Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 #Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 #Javascript
You might like
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
chrome调试javascript详解
2015/10/21 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
Python中的元类编程入门指引
2015/04/15 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python3数字求和的实例
2019/02/19 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
python requests库的使用
2021/01/06 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
介绍一下Linux文件的记录形式
2012/04/18 面试题
怎样写好自我鉴定
2013/12/04 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
体育教师教学随笔
2015/08/15 职场文书
工伤调解协议书
2016/03/21 职场文书
2019个人半年工作总结
2019/06/21 职场文书