There are numerous categories of JavaScript events but in this article, we will emphasize the usage of JavaScript focus and blur events.
JavaScript Focus and Blur Events
When HTML elements gain focus or lose focus, the JavaScript focus or blur events happen which are a part of the FocusEvent Object.
The events that are classified in the category of JavaScript focus and blur events are demonstrated below:
Each of the above mentioned events are discussed below.
1. onblur Event
The onblur event happens when the focus of an object is lost. It is mostly used within the validation code of a form. It does not bubble and cannot be canceled. It supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM level 2.
Syntax
Syntax of onblur event is as follows.
HTML Syntax
JavaScript Syntax
JavaScript addEventListener() Syntax
Example
<html>
<body>
Enter your name: <input type="text" id="fname" onblur="myFunc()">
<p>The function will change lower case letters to upper case letters.</p>
<script>
function myFunc() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
Output
When you leave the input field, the onblur event occurs and the lower-case letters are shifted to upper-case letter.
2. onfocus Event
The onfocus event happens when an elements is focused. It is mostly used with <input>, <select>, and <a>. It does not bubble and cannot be canceled. It supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM level 2.
Syntax
Syntax of onfocus event is as follows.
HTML Syntax
JavaScript Syntax
JavaScript addEventListener() Syntax
Example
<html>
<body>
Enter your name: <input type="text" onfocus="abFunction(this)">
<p>A function changes the background color of the input field when it is focused.</p>
<script>
function abFunction(focus) {
focus.style.background = "pink";
}
</script>
</body>
</html>
Output
When you click on the input field, the background color of input field will be changed to blue. We have shown the before and after state of the input field below.
Before
After
3. onfocusin Event
The onnfocusin event is same like onfocus event and happens when an element just gets the focus however a subtle difference between these two is that this (onfocusin) event bubbles and it cannot be canceled. It supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM level 2.
Syntax
Syntax of onfocusin event is as follows.
HTML Syntax
JavaScript Syntax
JavaScript addEventListener() Syntax
Example
<html>
<body>
Name: <input type="text" id="fname" onfocusin="abFunction()">
<p>Click on the input field</p>
<script>
function abFunction() {
document.getElementById("fname").style.backgroundColor = "pink";
}
</script>
</body>
</html>
Output
Before clicking the input field.
After clicking the input field, the background color of the input field will be changed to pink.
4. onfocusout Event
The onnfocusout event is same like onblur event and happens when an element just loses the focus however a subtle difference between these two is that this (onfocusout) bubbles and it cannot be canceled. It supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM level 2.
Syntax
Syntax of onfocusout event is as follows.
HTML Syntax
JavaScript Syntax
JavaScript addEventListener() Syntax
Example
<html>
<body>
Enter your name: <input type="text" id="fname" onfocusout="abFunction()">
<p>Leave the input field to shift the lower-case letters to upper-case.</p>
<script>
function abFunction() {
var out = document.getElementById("fname");
out.value = out.value.toUpperCase();
}
</script>
</body>
</html>
Output
When you leave the input field the lower case letters will be shifted to upper case letters.
Conclusion
Events that occur when an element gains or loses its focus are referred to as JavaScript focus and blur events. Events that are classified into the category of JavaScript focus and blur events are onblur event, onfouc event, onfocusin event, and onfocusout event. All these events are discussed in detail along with appropriate example.
