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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
vue3.0 上手体验
Sep 21 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
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
深入PHP内存相关的功能特性详解
2013/06/08 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
javascript Demo模态窗口
2009/12/06 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
python解析xml文件实例分析
2015/05/27 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Tensorflow 实现释放内存
2020/02/03 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
小学安全教育材料
2014/02/17 职场文书
校长寄语大全
2014/04/09 职场文书
报到证办理个人委托书
2014/10/06 职场文书
团员个人总结
2015/02/26 职场文书