jquery 回车事件实现代码


Posted in Javascript onAugust 23, 2011

例子,jquery键盘事件、回车键事件用法。

// 键盘事件
1、keydown() 
keydown事件会在键盘按下时触发. 

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

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

// 回车键事件 
// 绑定键盘按下事件  
   $(document).keypress(function(e) {  
    // 回车键事件  
       if(e.which == 13) {  
   jQuery(".confirmButton").click();  
       }  
   }); 
// 上下键事件 
$(document).keydown(function(event){  
  //判断当event.keyCode 为37时(即左方面键),执行函数to_left();  
  //判断当event.keyCode 为39时(即右方面键),执行函数to_right();    if(event.keyCode == 37){  
     to_left();   
  }else if (event.keyCode == 39){   
     to_right();   
  }   
});

说明:由于浏览器键盘按下事件的不同,可能导致部分事件不能正常操作,所以推荐keydown事件进行操作!

Jquery 监视按键,按下回车键触发某方法
<script type="text/javascript"> 
$(function () { 
$('input:text:first').focus(); //把焦点放在第一个文本框 
var $inp = $('input'); //所有的input元素 
$inp.keypress(function (e) { //这里给function一个事件参数命名为e,叫event也行,随意的,e就是IE窗口发生的事件。 
var key = e.which; //e.which是按键的值 
if (key == 13) { 
alert("aaa"); 
} 
}); 
});

问题:
拖了一个Login控件,然后给它转化为template,用于自定义开发。

jquery 回车事件实现代码

下面的代码中,我捕捉到了文本栏的回车按键,这时我要去触发LoginButton来提交登录信息进行验证,可是我使用$("[id$=LoginButton]").click();只在firefox上有效,在IE无效,歪打正着的尝试一下$("[id$=LoginButton]").focus();  ,这个可以在IE上起效,在IE上focus()即完成了对焦又执行了点击,不解啊。呵呵~

$inp.keypress(function (event) {
    var key = event.which;
    if (key == 13) {
        $("[id$=LoginButton]").click(); //支持firefox,IE武校
        //$('input:last').focus();
        $("[id$=LoginButton]").focus();  //支持IE,firefox无效。
//以上两句实现既支持IE也支持 firefox
    }
});

代码如下:

全局:

$(function(){ 
document.onkeydown = function(e){ 
var ev = document.all ? window.event : e; 
if(ev.keyCode==13) { 
$('#FormId).submit();//处理事件 
} 
} 
});

某个控件:
$('#id').keydown(function(e){ 
if(e.keyCode==13){ 
$('#FormId).submit(); //处理事件 
} 
});

if (window.event.keyCode==13) window.event.keyCode=0

//这样就取消回车键了
如果想模拟Tab键,只要写成  if (window.event.keyCode==13) window.event.keyCode=9 就行了,它会跳到另一个元素上。

Javascript 相关文章推荐
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 #Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 #Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 #Javascript
一些有用的JavaScript和jQuery的片段分享
Aug 23 #Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 #Javascript
jQuery最佳实践完整篇
Aug 20 #Javascript
jQuery的deferred对象使用详解
Aug 20 #Javascript
You might like
聊天室php&amp;mysql(二)
2006/10/09 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
可输入的下拉框
2006/06/19 Javascript
兼容FireFox 的 js 日历 支持时间的获取
2009/03/04 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
Python requests库用法实例详解
2018/08/14 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python退出循环的方法
2020/06/18 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Python中return函数返回值实例用法
2020/11/19 Python
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
应届大学生的推荐信
2013/11/20 职场文书
优秀志愿者事迹材料
2014/02/03 职场文书
开学典礼决心书
2014/03/11 职场文书
求职信内容怎么写
2014/05/26 职场文书
民政局个人整改措施
2014/09/24 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
银行工作心得体会范文
2016/01/23 职场文书
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python
Go语言测试库testify使用学习
2022/07/23 Golang