时间:2021-05-26
一、首先需要知道的是:
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;
})
更详尽的关于事件的总结和表述:https://www.jb51.net/article/28772.htm
w3school上的jQuery 事件参考手册
学习过程中,应该多思考怎样改善交互性和用户体验。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
jquery键盘事件的使用方法详解jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是:jquery代码:1.keydown();2.keyup();3
例子,jquery键盘事件、回车键事件用法。//键盘事件1、keydown()keydown事件会在键盘按下时触发.2、keyup()keyup事件会在按键释放
下面介绍jquery中交替点击事件toggle方法的使用示例。 代码如下:$('#clickId‘).toggle(function(){$('#divI
本文实例讲述了jQuery简单获取键盘事件的方法。分享给大家供大家参考,具体如下:一、我们什么时候要用到获取键盘事件做web的时候,为了更人性的设计,我们有的时
大致介绍jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力jQuery中的事件加载DOM在jQuery