Heim Web-Frontend js-Tutorial 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 事件参考手册

学习过程中,应该多思考怎样改善交互性和用户体验。
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Erfahren Sie, wie Sie die v-on-Direktive von Vue verwenden, um Tastaturkürzelereignisse zu verarbeiten Erfahren Sie, wie Sie die v-on-Direktive von Vue verwenden, um Tastaturkürzelereignisse zu verarbeiten Sep 15, 2023 am 11:01 AM

Erfahren Sie, wie Sie die v-on-Direktive von Vue verwenden, um Tastaturkürzelereignisse zu verarbeiten

Grundlegendes Tutorial zum Erlernen von Pygame: Schnelle Einführung in die Spieleentwicklung Grundlegendes Tutorial zum Erlernen von Pygame: Schnelle Einführung in die Spieleentwicklung Feb 19, 2024 am 08:51 AM

Grundlegendes Tutorial zum Erlernen von Pygame: Schnelle Einführung in die Spieleentwicklung

Ereignistypen in JavaScript: Häufige Tastatur- und Mausereignisse Ereignistypen in JavaScript: Häufige Tastatur- und Mausereignisse Sep 03, 2023 am 09:33 AM

Ereignistypen in JavaScript: Häufige Tastatur- und Mausereignisse

Pygame-Installationsanleitung: Ein leicht verständliches Einführungs-Tutorial Pygame-Installationsanleitung: Ein leicht verständliches Einführungs-Tutorial Feb 20, 2024 pm 12:39 PM

Pygame-Installationsanleitung: Ein leicht verständliches Einführungs-Tutorial

So erstellen Sie mit Golang ein effizientes Spieleentwicklungs-Framework So erstellen Sie mit Golang ein effizientes Spieleentwicklungs-Framework Mar 06, 2024 pm 06:15 PM

So erstellen Sie mit Golang ein effizientes Spieleentwicklungs-Framework

Java Swing im Vergleich zu anderen GUI-Bibliotheken: Vor- und Nachteile Java Swing im Vergleich zu anderen GUI-Bibliotheken: Vor- und Nachteile Mar 28, 2024 pm 04:02 PM

Java Swing im Vergleich zu anderen GUI-Bibliotheken: Vor- und Nachteile

Praktische Anwendungen von Event-Bubbling und anwendbare Event-Typen Praktische Anwendungen von Event-Bubbling und anwendbare Event-Typen Feb 18, 2024 pm 04:19 PM

Praktische Anwendungen von Event-Bubbling und anwendbare Event-Typen

Pygame-Installations-Tutorial: Ermöglicht Ihnen einen schnellen Einstieg in die Spieleprogrammierung Pygame-Installations-Tutorial: Ermöglicht Ihnen einen schnellen Einstieg in die Spieleprogrammierung Feb 20, 2024 am 09:17 AM

Pygame-Installations-Tutorial: Ermöglicht Ihnen einen schnellen Einstieg in die Spieleprogrammierung

See all articles