Home > Web Front-end > Front-end Q&A > What is javascript focus event

What is javascript focus event

WBOY
Release: 2022-01-28 15:06:59
Original
6282 people have browsed it

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!

Related labels:
source: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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template