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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
原生js编写2048小游戏
Mar 17 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
基于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给图片加水印
2016/10/12 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
javascript 定义新对象方法
2010/02/20 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
2010/12/06 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python 基于opencv操作摄像头
2020/12/24 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
幼儿园小班评语大全
2014/04/17 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
法学院毕业生求职信
2014/06/25 职场文书
毕业生工作求职信
2014/06/30 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
党支部意见范文
2015/06/02 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis