有心就有方向 2015-05-26
本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍,有需要了解的朋友可参考。
一、首先需要知道的是:
1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
代码如下 | 复制代码 |
$('input').keyup(funciton(){ |
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress()事件和keydown是差不多的,只有一个例外,如果需要阻止按键的默认行为,你必须是哟就keypress事件
例1
代码如下 | 复制代码 |
$(selector).keydown(function(event){ |
event.keyCode能够得到当前按键的代码,用到下面即可。
实例
代码如下 | 复制代码 |
$(document).keydown(function(event){ |
$tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39;
三、实例(当按下键盘上的左右方面键时)
代码如下 | 复制代码 |
$(document).keydown(function(event){ //判断当event.keyCode 为37时(即左方面键),执行函数to_left(); //判断当event.keyCode 为39时(即右方面键),执行函数to_right(); if(event.keyCode == 37){ //do somethings; }else if (event.keyCode == 39){ //do somethings; } }); |
注意
在jQuery中keydown,keypress,keyup事件是按一定的顺序执行的。
代码如下 | 复制代码 |
$('input').keyup(function(){ console.log('keyup'); }); $('input').keydown(function(){ console.log('keydown'); }); $('input').keypress(function(){ console.log('keypress'); }); |
执行结果是:keydown ,keypress ,keyup .
<table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%&qu