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 深拷贝函数
Dec 04 Javascript
js实现双向链表互联网机顶盒实战应用实现
Oct 28 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
简单的分页代码js实现
May 17 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
php生成excel列序号代码实例
2013/12/24 PHP
php画图实例
2014/11/05 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
java解析json方法总结
2019/05/16 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python中super函数的用法
2017/11/17 Python
Python中实现switch功能实例解析
2018/01/11 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
python中scikit-learn机器代码实例
2018/08/05 Python
PyTorch-GPU加速实例
2020/06/23 Python
Python数据模型与Python对象模型的相关总结
2021/01/26 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
运动会跳远广播稿
2014/02/04 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
企业员工薪酬方案
2014/06/04 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
工资证明范本
2015/06/12 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技