What is javascript focus event-Front-end Q&A-php.cn

Table of Contents

What is javascript focus event

Home

Web Front-end

Front-end Q&A

What is javascript focus event

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jan 28, 2022 pm 03:06 PM

html javascript front end

Focus events: 1. Use the focus() method to set the element to obtain the focus event, the syntax is "$(selector).focus(function)"; 2. Use the blur() method to set the element to lose the focus event, the syntax is is "$(selector).blur(function)".

What is javascript focus event

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is javascript focus event

The focus event occurs when an element gains focus.

When an element is selected by mouse click or positioned by tab key, the element will gain focus.

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

The syntax is:

$(selector).focus()

Copy after login

or:

$(selector).focus(function)

Copy after login

The blur event occurs when the element loses focus.

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

The syntax is:

$(selector).blur()

Copy after login

or:

$(selector).blur(function)

Copy after login

The example is as follows:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>

Copy after login

Output result:

What is javascript focus event

Related recommendations: javascript learning tutorial

The above is the detailed content of What is javascript focus event. For more information, please follow other related articles on the PHP Chinese website!

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