Maison interface Web js tutoriel 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 事件参考手册

学习过程中,应该多思考怎样改善交互性和用户体验。
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Apprenez à utiliser la directive v-on de Vue pour gérer les événements de raccourci clavier Apprenez à utiliser la directive v-on de Vue pour gérer les événements de raccourci clavier Sep 15, 2023 am 11:01 AM

Apprenez à utiliser la commande v-on de Vue pour gérer les événements de raccourci clavier. Dans Vue, nous pouvons utiliser la commande v-on pour écouter les événements d'éléments, y compris les événements de souris, les événements de clavier, etc. Cet article explique comment utiliser la directive v-on pour gérer les événements de raccourci clavier et fournit des exemples de code spécifiques. Tout d'abord, vous devez définir une méthode dans l'instance Vue pour gérer les événements de touches de raccourci. Par exemple, nous pouvons ajouter une méthode nommée handleShortcut aux méthodes : méthodes :{

Tutoriel de base pour apprendre Pygame : introduction rapide au développement de jeux Tutoriel de base pour apprendre Pygame : introduction rapide au développement de jeux Feb 19, 2024 am 08:51 AM

Tutoriel d'installation de Pygame : Maîtrisez rapidement les bases du développement de jeux, des exemples de codes spécifiques sont nécessaires Introduction : Dans le domaine du développement de jeux, Pygame est une bibliothèque Python très populaire. Il offre aux développeurs des fonctionnalités riches et des interfaces faciles à utiliser, leur permettant de développer rapidement des jeux de haute qualité. Cet article vous présentera en détail comment installer Pygame et fournira quelques exemples de code spécifiques pour vous aider à maîtriser rapidement les bases du développement de jeux. 1. Installation de Pygame Installez Python et commencez à installer Pyga

Types d'événements en JavaScript : événements courants du clavier et de la souris Types d'événements en JavaScript : événements courants du clavier et de la souris Sep 03, 2023 am 09:33 AM

JavaScript fournit un large éventail d'événements qui vous permettent d'interagir et de répondre aux actions des utilisateurs sur les pages Web. Parmi ces événements, les événements clavier et souris sont les plus couramment utilisés. Dans cet article, nous examinerons les différents types d'événements de clavier et de souris en JavaScript et verrons des exemples de leur utilisation. Événements de clavier Les événements de clavier se produisent lorsqu'un utilisateur interagit avec le clavier, par exemple en appuyant sur une touche, en la relâchant ou en tapant un caractère. Les événements de clavier nous permettent de faire des choses intéressantes, comme vérifier si l'utilisateur a saisi correctement quelque chose dans un formulaire ou si quelque chose se produit lorsqu'une touche spécifique est enfoncée. C'est comme si le site Web écoutait les touches sur lesquelles vous appuyez et réagissait en conséquence. Les événements de clavier sont divisés en trois types : événement keydown

Guide d'installation de Pygame : un didacticiel d'introduction facile à comprendre Guide d'installation de Pygame : un didacticiel d'introduction facile à comprendre Feb 20, 2024 pm 12:39 PM

Tutoriel d'installation de Pygame : Un guide de démarrage simple et facile à comprendre, nécessitant des exemples de code spécifiques Introduction : Pygame est une bibliothèque Python très populaire pour développer des jeux 2D. Il fournit des fonctions riches et des interfaces faciles à utiliser, rendant le développement de jeux plus facile et plus intéressant. Cet article vous présentera le processus d'installation de Pygame et fournira des exemples de code spécifiques pour aider les débutants à démarrer rapidement. 1. Installez Python et Pygame Téléchargez Python et Pygame : vous devez d'abord installer Python.

Comment utiliser Golang pour créer un cadre de développement de jeux efficace Comment utiliser Golang pour créer un cadre de développement de jeux efficace Mar 06, 2024 pm 06:15 PM

En tant que langage de programmation populaire et efficace dans l’industrie, Golang est également largement utilisé dans le domaine du développement de jeux. Cet article expliquera comment utiliser Golang pour créer un cadre de développement de jeux efficace et fournira des exemples de code spécifiques. Nous prendrons comme exemple un jeu 2D simple pour expliquer. Première partie : Construction du moteur de jeu Tout d'abord, nous devons créer un moteur de jeu simple, comprenant une boucle de jeu, un rendu graphique et d'autres fonctions. Ce qui suit est un framework de moteur de jeu simple : packageenginei

Java Swing par rapport aux autres bibliothèques GUI : avantages et inconvénients Java Swing par rapport aux autres bibliothèques GUI : avantages et inconvénients Mar 28, 2024 pm 04:02 PM

Avantages : Compatibilité multiplateforme : les composants Swing sont basés sur la machine virtuelle Java (JVM) et peuvent s'exécuter sur n'importe quelle plateforme prenant en charge Java, y compris Windows, MacOS et Linux. Cette compatibilité multiplateforme le rend idéal pour développer des applications multiplateformes. Ensemble de composants riche : Swing fournit une large gamme de composants, notamment des boutons, des champs de texte, des listes et des tableaux. Ces composants sont hautement personnalisables, permettant aux développeurs de créer des interfaces utilisateur complexes. Gestionnaires de mise en page puissants : Swing propose plusieurs gestionnaires de mise en page tels que BorderLayout, FlowLayout et GridBagLayout. Ces gestionnaires de mise en page aident à organiser et à organiser les composants pour simplifier leur utilisation

Applications pratiques du bouillonnement d'événements et types d'événements applicables Applications pratiques du bouillonnement d'événements et types d'événements applicables Feb 18, 2024 pm 04:19 PM

Scénarios d'application du bouillonnement d'événements et types d'événements qu'il prend en charge. Le bouillonnement d'événements signifie que lorsqu'un événement sur un élément est déclenché, l'événement sera transmis à l'élément parent de l'élément, puis à l'élément ancêtre de l'élément jusqu'à ce qu'il soit transmis. est transmis au nœud racine du document. Il s'agit d'un mécanisme important du modèle d'événement et propose un large éventail de scénarios d'application. Cet article présentera les scénarios d'application du bouillonnement d'événements et explorera les types d'événements qu'il prend en charge. 1. Scénarios d'application La diffusion d'événements propose un large éventail de scénarios d'application dans le développement Web. Voici plusieurs scénarios d'application courants. validation du formulaire dans le formulaire

Tutoriel d'installation de Pygame : vous permet de démarrer rapidement avec la programmation de jeux Tutoriel d'installation de Pygame : vous permet de démarrer rapidement avec la programmation de jeux Feb 20, 2024 am 09:17 AM

Tutoriel d'installation de Pygame : vous permet de démarrer rapidement avec la programmation de jeux Introduction : Pygame est une bibliothèque de développement de jeux basée sur le langage de programmation Python. Elle fournit une riche série de fonctions et d'outils pour aider les développeurs à créer et à concevoir rapidement des jeux 2D. Cet article explique comment installer Pygame et donne des exemples de code spécifiques pour aider les débutants à se lancer rapidement dans la programmation de jeux. 1. Installez Pygame : Assurez-vous d'avoir installé l'environnement Python : installez d'abord l'interpréteur Python sur votre ordinateur, assurez-vous

See all articles