首页 web前端 js教程 jquery键盘事件使用介绍_jquery

jquery键盘事件使用介绍_jquery

May 16, 2016 pm 06:00 PM
键盘事件

一、首先需要知道的是:
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;
})

更详尽的关于事件的总结和表述:http://www.jb51.net/article/28772.htm

w3school上的jQuery 事件参考手册

学习过程中,应该多思考怎样改善交互性和用户体验。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

学会使用Vue的v-on指令处理键盘快捷键事件 学会使用Vue的v-on指令处理键盘快捷键事件 Sep 15, 2023 am 11:01 AM

学会使用Vue的v-on指令处理键盘快捷键事件在Vue中,我们可以使用v-on指令来监听元素的事件,包括鼠标事件、键盘事件等。本文将介绍如何使用v-on指令来处理键盘快捷键事件,并提供具体的代码示例。首先,需要在Vue实例中定义一个处理快捷键事件的方法。例如,我们可以在methods中添加一个名为handleShortcut的方法:methods:{

学习Pygame的基础教程:快速入门游戏开发 学习Pygame的基础教程:快速入门游戏开发 Feb 19, 2024 am 08:51 AM

Pygame安装教程:快速掌握游戏开发的基础,需要具体代码示例引言:在游戏开发领域中,Pygame是一个非常受欢迎的Python库。它为开发者提供了丰富的功能和易用的接口,让他们能够快速地开发出优质的游戏。本文将为你详细介绍如何安装Pygame,并提供一些具体的代码示例,以帮助你快速掌握游戏开发的基础。一、Pygame的安装安装Python在开始安装Pyga

JavaScript中的事件类型:常见的键盘和鼠标事件 JavaScript中的事件类型:常见的键盘和鼠标事件 Sep 03, 2023 am 09:33 AM

JavaScript提供了广泛的事件,使您可以与网页上的用户操作进行交互并做出响应。在这些事件中,键盘和鼠标事件是最常用的。在本文中,我们将了解JavaScript中不同类型的键盘和鼠标事件,并查看如何使用它们的示例。键盘事件当用户与键盘交互时,例如按下某个键、释放某个键或键入字符,就会发生键盘事件。键盘事件让我们可以做一些很酷的事情,例如检查用户是否在表单中正确输入了某些内容,或者在按下特定键时发生某些操作。就好像网站正在监听您按下的键并做出相应的反应。键盘事件分为三种类型:keydown事件

Pygame安装指南:易学易懂的入门教程 Pygame安装指南:易学易懂的入门教程 Feb 20, 2024 pm 12:39 PM

Pygame安装教程:简单易懂的入门指南,需要具体代码示例引言:Pygame是一款非常流行的用于开发2D游戏的Python库。它提供了丰富的功能和易用的接口,使得游戏开发更加简单和有趣。本文将为大家介绍Pygame的安装过程,并提供具体的代码示例,帮助初学者快速入门。一、安装Python和Pygame下载Python和Pygame:首先需要安装Python,

如何利用Golang打造高效的游戏开发框架 如何利用Golang打造高效的游戏开发框架 Mar 06, 2024 pm 06:15 PM

作为一门业界热门且高效的编程语言,Golang在游戏开发领域也有着广泛的应用。本文将介绍如何利用Golang打造高效的游戏开发框架,并提供具体的代码示例。我们将以一个简单的2D小游戏为例进行讲解。第一部分:游戏引擎搭建首先,我们需要搭建一个简单的游戏引擎,包含游戏循环、图形渲染等功能。以下是一个简单的游戏引擎框架:packageenginei

Java Swing与其他GUI库对比:优势与劣势 Java Swing与其他GUI库对比:优势与劣势 Mar 28, 2024 pm 04:02 PM

优势:跨平台兼容性:Swing组件基于Java虚拟机(JVM),可以在支持Java的任何平台上运行,包括windows、MacOS和linux。这种跨平台兼容性使其成为开发跨平台应用程序的理想选择。丰富的组件集:Swing提供了广泛的组件,包括按钮、文本字段、列表和表格。这些组件高度可定制,允许开发人员创建复杂的用户界面。强大的布局管理器:Swing提供了几个布局管理器,例如BorderLayout、FlowLayout和GridBagLayout。这些布局管理器有助于组织和排列组件,从而简化用

事件冒泡的实际应用和适用事件类型 事件冒泡的实际应用和适用事件类型 Feb 18, 2024 pm 04:19 PM

事件冒泡的应用场景及其支持的事件种类事件冒泡是指当一个元素上的事件被触发时,该事件会被传递给该元素的父元素,再传递给该元素的祖先元素,直到传递到文档的根节点。它是事件模型的一种重要机制,具有广泛的应用场景。本文将介绍事件冒泡的应用场景,并探讨它所支持的事件种类。一、应用场景事件冒泡在Web开发中有着广泛的应用场景,下面列举了几个常见的应用场景。表单验证在表单

Pygame安装教程:让你迅速上手游戏编程 Pygame安装教程:让你迅速上手游戏编程 Feb 20, 2024 am 09:17 AM

Pygame安装教程:让你迅速上手游戏编程引言:Pygame是一款基于Python编程语言的游戏开发库,它提供了一系列丰富的功能和工具,能够帮助开发者快速实现2D游戏的创建和设计。本文将介绍如何安装Pygame,并给出具体的代码示例,帮助初学者迅速上手游戏编程。一、安装Pygame:确保已经安装了Python环境:首先要在计算机上安装Python解释器,确保

See all articles