jQuery监听键盘事件及相关操作使用

一、首先需要知道的是:

1、keydown() keydown事件会在键盘按下时触发.

2、keyup()

keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

3、keypress()

keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键

二、获得键盘上对应的ascII码:

$(document).keydown(function(event){

console.log(event.keyCode);

});

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;

}

});

实例研究:

比如:小说网站中常见的按左右键来实现上一篇文章和下一篇文章;按ctrl+回车实现表单提交;google reader和有道阅读中的全快捷键操作...(以此提高用户体验)

如果我们要实现ctrl+Enter就是ctrl+回车提交表单,可以这样:

$(document).keypress(function(e) {

if (e.ctrlKey && e.which == 13)

$("form").submit();

})

//键盘操作

$(document).keydown(function(event){

var e = event || window.event;

var k = e.keyCode || e.which;

switch(k) {

case 37:

//…

break;

case 39:

//…

break;

}

return false;

})

时间: 2024-10-08 14:15:26

jQuery监听键盘事件及相关操作使用的相关文章

JQuery select控件的相关操作

本文转载于 http://www.cnblogs.com/zfc2201/archive/2012/09/06/2674312.html JQuery获取和设置Select选项方法汇总如下: 获取select 先看看下面代码: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:s

Js监听键盘事件

表单提交的时候大多数用户都习惯用回车键来进行提交,页面接受回车键的处理如下: if(navigator.userAgent.indexOf("MSIE")>0) {   //IE document.onkeydown=function(){ if(13 == event.keyCode){ alert('browser is ie and enter key down'); } } }else{   //非IE window.onkeydown=function(){ if(13

监听键盘事件

注册监听键盘事件: 1 // 键盘即将隐藏 2 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil]; 3 4 // 键盘已经隐藏 5 [[NSNotificationCenter defaultCenter] addObserver:self selector:@sel

注册监听键盘事件的通知

注册监听键盘事件的通知[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardShow:) name:UIK

前端学习笔记(zepto或jquery)——对li标签的相关操作(二)

对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li').eq(0).html());3.alert($('ul>li:nth-child(1)').html()); 4.alert($('ul').children()[0].innerHTML);5.alert($('ul>li')[0].innerHTML);6.alert($('ul').fi

前端学习笔记(zepto或jquery)——对li标签的相关操作(三)

对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+":"+ item.innerHTML); }); $("ul>li").each(function(index,item){ alert(index+":"+ item.innerHTML); }); $("ul>li").ea

前端学习笔记(zepto或jquery)——对li标签的相关操作(五)

对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2</li> <li>3</li> <li>4</li> <li><p>5</p></li> <li>6</li> <li><p>7</p></

JQuery对CheckBox的一些相关操作

一.通过选择器选取CheckBox: 1.给CheckBox设置一个id属性,通过id选择器选取: <input type="checkbox" name="myBox" id="chkOne" value="1" checked="checked" /> JQuery:         $("#chkOne").click(function(){}); 2.给CheckBo

在div监听键盘事件获取不到的问题

在给如div等元素绑定键盘事件(如keydown)时, 会发现绑定是失效的. 解决方法: 给当前元素增加 tabindex 属性: 原理: div等非输入性质的元素(与其对应的可输入性元素有input, textarea), 是不可被聚焦的. 所以无法监听其的键盘事件. 而通过增加 tabindex 属性,可以指定该元素可触焦. 关于tabindex(引自MDN): tabindex 全局属性 是个整数,表示元素(如果可聚焦)是否能够接受输入焦点. 如果它应该参与键盘序列导航,那么就是它的位置.