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 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
使用JS实现动态时钟
Mar 12 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 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
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
Express的路由详解
2015/12/10 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
局域网定义和特性
2016/01/23 面试题
物业管理毕业生个人的求职信
2013/11/30 职场文书
大学应届生的自我评价
2014/03/06 职场文书
合作协议书
2014/04/23 职场文书
管理提升方案
2014/06/04 职场文书
小学元宵节活动总结
2015/02/06 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
Python学习之迭代器详解
2022/04/01 Python