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 相关文章推荐
js分页工具实例
Jan 28 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
gojs实现蚂蚁线动画效果
Feb 18 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获取地址栏信息的代码
2008/10/08 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
php实现的简单日志写入函数
2015/03/31 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
在Mac OS上使用mod_wsgi连接Python与Apache服务器
2015/12/24 Python
python实现电子产品商店
2019/02/26 Python
Python实现使用request模块下载图片demo示例
2019/05/24 Python
Django实现内容缓存实例方法
2020/06/30 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
面向对象编程的优势是什么
2015/12/17 面试题
网络安全方面的面试题
2015/11/04 面试题
北大自主招生自荐信
2013/10/19 职场文书
考试没考好检讨书
2014/01/31 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
525心理活动总结
2014/07/04 职场文书
介绍信的写法
2015/01/31 职场文书
长江三峡导游词
2015/01/31 职场文书
论文评审意见
2015/06/05 职场文书
Python读取和写入Excel数据
2022/04/20 Python