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 EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 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
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
Python3字符串学习教程
2015/08/20 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
python3个性签名设计实现代码
2018/06/19 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python实现简单坦克大战
2020/03/27 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
365 Tickets英国:全球景点门票
2019/07/06 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
国际贸易个人求职信范文
2014/01/04 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
少先队工作总结2015
2015/05/13 职场文书
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js