Updated June 15, 2023
Introduction to JavaScript onfocus
In JavaScript, onfocus is an attribute that works when the focus is on any element. This attribute is commonly used with elements such as <input>, <a>, <select>. This event attribute is sustained by every HTML element except the ones like <base>, <head>, <bdo>, <br>, <html>, <meta>, <iframe>, <param>, <style>, <script>, and <title> elements. This event handler executes when an element becomes focus on the user’s screen. The elements focus can be when the user clicks on a text box. At that time, it is in focus by the user since the person has clicked on it.
Syntax:
Given below is the syntax of the onfocus event handler:
<element onfocus = "script">In this context, the script executes when the onfocus attribute is triggered, and it is represented by the attribute value.
How onfocus Event work in JavaScript?
Developers frequently use the onfocus event handler with text boxes and select drop-down lists. Developers use the onfocus event handler to highlight the option the user is currently scrolling over or selecting. In addition to that, when a user tries to stroll down the list of items in a particular box and the person has moved the cursor on each and every option at a particular time, that option present in the select box is the focus.
A developer can use this event handler for doing different tasks when an element is on focus. Yet, the most common job is to alter the color of the background of the item on focus. This clearly as well as easily distinguishes it from the others and makes it stand out that this element is the one which is presently on focus. Suppose there is a textbox. This proves how it is able to create several situations for an item when it is on focus.
Even if you click other portions of the page, the color of the text box remains the same.
Examples
Here are the mentioned examples:
Example #1
JavaScript program that changes the color of a text field when it is in focus.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Sample for onfocus event handler</p>
User Name: <input type="text" id="fname" onfocus="func(this.id)"><br>
Confirm user name: <input type="text" id="lname" onfocus="func(this.id)">
<script>
function func(x) {
document.getElementById(x).style.background = "red";
}
</script>
</body>
</html>Output:
On executing the code, two text fields will be displayed.
Clicking the first text box triggers the onfocus function, resulting in a change of its color to red.
On clicking the second text box also, the color of it changes to red.
Example #2
JavaScript program that changes the background color of the text box and prints the Unicode.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Javascript onkeydown Event Handler </title>
</head>
<body>
<h1>Event handler<h1>
<h2>Sample Output</h2>
User Name: <input type="text" id="fname" onfocus="func(this.id)"><br>
Confirm user name: <input type="text" id="lname" onfocus="func(this.id)"><br>
Age: <input type="text" id="demo" onkeydown="func1(this.id)">
<script>
function func1(x) {
var keyCode = ('which' in event) ? event.which : event.keyCode;
alert ("The Unicode key code is: " + keyCode);
document.getElementById(x).style.background = "red";
}
function func(x) {
document.getElementById(x).style.background = "red";
}
</script>
</body>
</html>Output:
Three text fields will be displayed on executing the code.
When the user clicks on the first two boxes, the background color changes to red. Similarly, when the user clicks on the third box, a popup displays the Unicode of the entered character.
When the user presses OK, the color of that box also changes to red.
Example #3
The JavaScript program changes the background color of the textbox when it is clicked and leaves the field.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Background color changes to green when input is given. color changes to yellow when the field is left.</p>
User name: <input type="text" id="myInput" onfocus="func1()" onblur="func2()">
<script>
function func1() {
//background color changes to green
document.getElementById("myInput").style.background = "green";
}
function func2() {
//background color changes to yellow
document.getElementById("myInput").style.background = "yellow";
}
</script>
</body>
</html>Output:
Executing the code will display a textbox with a title.
When the user clicks the input field, the color of the field changes to green.
Simultaneously, when the user leaves the input field, the color of the field changes to yellow.
Example #4
JavaScript program that clears the field when it is on focus.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Input field became empty when it is on focus</p>
<input type="text" onfocus="this.value=''" value="Cool">
</body>
</html>Output:
A textbox with a title and a string inside the field will be displayed on executing the code.
But, when the text field is clicked, it becomes empty.
Example #5
JavaScript program that changes the background color when the user inputs the text field and removes the color when the user left the input field.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Background color changes to red when user inputs on a text field and removes the color when the user left the input field</p>
<form id="myForm">
<input type="text" id="Input">
</form>
<script>
var v = document.getElementById("myForm");
v.addEventListener("focus", func1, true);
v.addEventListener("blur", func2, true);
function func1() {
document.getElementById("Input").style.backgroundColor = "green";
}
function func2() {
document.getElementById("Input").style.backgroundColor = "";
}
</script>
</body>
</html>Output:
The text field displayed upon executing the code will have a white background color.
But when the user clicks on the text field, color changes to green.
Once the user leaves the field, color again changes to white.
Recommended Articles
We hope that this EDUCBA information on “JavaScript onfocus” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
