jQuery keyboard events keydown() and keyup() events

keydown() event

Definition and usage

The complete key press process is divided into two parts: 1. The key is pressed down; 2. The button is released.

The keydown event occurs when the button is pressed.

The keydown() method triggers the keydown event, or specifies a function to run when the keydown event occurs.

Note: If set on a document element, this event will occur regardless of whether the element has focus.

Syntax

$("").keydown()

Let’s write a keydown event

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>submit</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>    
    <p>php 中文网</p>

    <script>
        $('body').keydown(function(){
            $('p').html('php.cn');
        })
    </script>
</body>
</html>

When the keyboard is pressed, "php Chinese website" will be replaced by "php.cn"

keyup event

Definition and usage

The complete key press process is divided into two parts, the key is pressed, and then the key is released and reset.

The keyup event occurs when the button is released. It happens on the element that currently has focus.

The keyup() method triggers the keyup event, or specifies the function to be run when the keyup event occurs.

Note: If set on a document element, this event will occur regardless of whether the element has focus.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>    
    <p>php 中文网</p>

    <script>
        $('body').keyup(function(){
            $('p').html('php.cn');
        })
    </script>
</body>
</html>

Looking at the above example, you can debug locally. When the keyboard is pressed but not released, the text will not change. When the keyboard is released, the text will change.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>submit</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <p>php 中文网</p> <script> $('body').keydown(function(){ $('p').html('php.cn'); }) </script> </body> </html>

submit Reset Code

Automatic operation

jQuery keyboard events keydown() and keyup() events

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]