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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
javascript实现控制div颜色
Jul 07 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 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
19个超实用的PHP代码片段
2014/03/14 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP串行化与反串行化实例分析
2016/12/27 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
Python中函数的多种格式和使用实例及小技巧
2015/04/13 Python
python求解水仙花数的方法
2015/05/11 Python
Django数据库表反向生成实例解析
2018/02/06 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Python内存映射文件读写方式
2020/04/24 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
解决c++调用python中文乱码问题
2020/07/29 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
MYSQL基础面试题
2012/05/13 面试题
JAVA软件工程师测试题
2014/07/25 面试题
轻化专业学生实习自我鉴定
2013/09/20 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
会计做账心得体会
2016/01/22 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis