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


Posted in Javascript onMay 25, 2016

本文章在给大家介绍在用户输入完信息之后直接按回车进行表单提交的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按回车键实现表单提交的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
最短的IE判断代码
Mar 13 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
浅谈js闭包理解
Mar 28 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
Javascript之BOM(window对象)详解
May 25 #Javascript
jQueryUI中的datepicker使用方法详解
May 25 #Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 #Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 #Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 #Javascript
Vue.js报错Failed to resolve filter问题的解决方法
May 25 #Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 #Javascript
You might like
实用函数7
2007/11/08 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
jquery dialog键盘事件代码
2010/08/01 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Python中dict和set的用法讲解
2019/03/28 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
浅谈django channels 路由误导
2020/05/28 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
受欢迎的大学生自我评价
2013/12/05 职场文书
幼儿园庆六一游园活动方案
2014/01/29 职场文书
美容院经理岗位职责
2014/04/03 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
国庆节慰问信
2015/02/15 职场文书
2015年库房工作总结
2015/04/30 职场文书
社区敬老月活动总结
2015/05/07 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
可可西里观后感
2015/06/08 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android