Home Web Front-end JS Tutorial Introduction to javascript/jquery keyboard events

Introduction to javascript/jquery keyboard events

Dec 16, 2016 am 10:52 AM

1. The first thing you need to know is:
1. keydown()
keydown event will be triggered when the keyboard is pressed.
2. keyup()
keyup event will be triggered when the key is released, that is, after you press the keyboard and get up The event
3. keyPRess()
keypress event will be triggered when the key is tapped. We can understand it as pressing and lifting the same key

Second, get the corresponding asciII code on the keyboard:

$(document). keydown(function(event){
alert(event.keyCode);
});

$tips: In the above example, event.keyCode can help us get what keys on the keyboard we pressed. What he returns is the ASCII code, for example, the up, down, left and right keys are 38, 40, 37, 39 respectively;

3. Example (when the left and right keys on the keyboard are pressed)
The code is as follows:

$(document) .keydown(function(event){
//Judge when event.keyCode is 37 (i.e. left side key), execute function to_left(); //Judge when event.keyCode is 39 (i.e. right side key), execute Function to_right();
if(event.keyCode == 37){
                } else if (event.keyCode == 39) {                                        else if (event.keyCode == 38){
                                                                                          ){ $(".abc").CSS( {'left':'-=10'});}function to_right(){ $(".abc").css({'left':'+=10'});}function to_top(){$( ".abc").css({'top':'-=10'});}function to_bottom(){$(".abc").css({'top':'+=10'}); }




The above is the introduction of javascript/jquery keyboard events. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!



Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1655
14
PHP Tutorial
1252
29
C# Tutorial
1226
24
Learn to use Vue's v-on directive to handle keyboard shortcut events Learn to use Vue's v-on directive to handle keyboard shortcut events Sep 15, 2023 am 11:01 AM

Learn to use Vue's v-on directive to handle keyboard shortcut events. In Vue, we can use the v-on directive to listen for element events, including mouse events, keyboard events, etc. This article will introduce how to use the v-on directive to handle keyboard shortcut events and provide specific code examples. First, you need to define a method in the Vue instance to handle shortcut key events. For example, we can add a method named handleShortcut to methods: methods:{

Basic tutorial for learning Pygame: Quick introduction to game development Basic tutorial for learning Pygame: Quick introduction to game development Feb 19, 2024 am 08:51 AM

Pygame installation tutorial: Quickly master the basics of game development, specific code examples are required Introduction: In the field of game development, Pygame is a very popular Python library. It provides developers with rich features and easy-to-use interfaces, allowing them to quickly develop high-quality games. This article will introduce you in detail how to install Pygame and provide some specific code examples to help you quickly master the basics of game development. 1. Installation of Pygame Install Python and start installing Pyga

Event Types in JavaScript: Common Keyboard and Mouse Events Event Types in JavaScript: Common Keyboard and Mouse Events Sep 03, 2023 am 09:33 AM

JavaScript provides a wide range of events that allow you to interact with and respond to user actions on web pages. Among these events, keyboard and mouse events are the most commonly used. In this article, we'll look at the different types of keyboard and mouse events in JavaScript and see examples of how to use them. Keyboard events Keyboard events occur when a user interacts with the keyboard, such as pressing a key, releasing a key, or typing a character. Keyboard events allow us to do some cool things, such as checking if the user entered something correctly into a form, or that something happens when a specific key is pressed. It's as if the website is listening to the keys you press and reacts accordingly. Keyboard events are divided into three types: keydown event

Pygame Installation Guide: An easy-to-understand introductory tutorial Pygame Installation Guide: An easy-to-understand introductory tutorial Feb 20, 2024 pm 12:39 PM

Pygame Installation Tutorial: A simple and easy-to-understand getting started guide, requiring specific code examples Introduction: Pygame is a very popular Python library for developing 2D games. It provides rich functions and easy-to-use interfaces, making game development easier and more interesting. This article will introduce you to the installation process of Pygame and provide specific code examples to help beginners get started quickly. 1. Install Python and Pygame. Download Python and Pygame: First you need to install Python.

How to use Golang to create an efficient game development framework How to use Golang to create an efficient game development framework Mar 06, 2024 pm 06:15 PM

As a popular and efficient programming language in the industry, Golang is also widely used in the field of game development. This article will introduce how to use Golang to create an efficient game development framework and provide specific code examples. We will take a simple 2D game as an example to explain. Part One: Game Engine Construction First, we need to build a simple game engine, including game loop, graphics rendering and other functions. The following is a simple game engine framework: packageenginei

How to do bootstrap modal box How to do bootstrap modal box Apr 07, 2025 pm 03:24 PM

How to create modal boxes using Bootstrap? Create a modal box with the appropriate HTML structure. Includes Bootstrap and jQuery libraries to enable modal functionality. Use JavaScript or jQuery code to display or hide modal boxes.

The pros and cons of developing desktop applications in Golang The pros and cons of developing desktop applications in Golang Apr 08, 2024 pm 03:42 PM

The advantages of using Go language in cross-platform desktop development include: cross-platform, efficiency, concurrency, and powerful standard library. The disadvantages are: GUI limitations, weak native IDE support, and high resource consumption. If you consider developing a cross-platform text editor, you can use the Go standard library to handle file I/O and text formatting, and use third-party libraries to create cross-platform interfaces.

How to solve Vue error: Unable to use v-on correctly to monitor keyboard events How to solve Vue error: Unable to use v-on correctly to monitor keyboard events Aug 17, 2023 pm 10:27 PM

How to solve Vue error: Unable to use v-on to listen to keyboard events correctly. As a popular front-end framework, Vue.js can help us build efficient, flexible and maintainable web applications. Among them, Vue provides the v-on instruction to monitor DOM events to facilitate us to handle user operations. However, when using v-on to monitor keyboard events, we sometimes encounter some errors that prevent us from using this function correctly. This article will walk you through this problem and provide some code examples. Check Vue version

See all articles