JavaScript Focus() Method
Last Updated :
22 Mar, 2024
The focus()
method in JavaScript is used to give focus to an HTML element, such as an input field, button, or link. When called on an element, it brings that element into focus, typically highlighting it or making it ready for user interaction.
Syntax:
HTMLElementObject.focus();
Parameters:
It does not accept any parameters.Â
Return Value:
This method does not return any value.
JavaScript Focus() Method Example:
Example 1: Focuses on an input field by hovering over that field.Â
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<title>Document</title>
</head>
<body>
<form action="#">
<br />
<br />
<label> Hover me: </label>
<input
type="text"
onmousemove="myFunction()"
id="focus"
/>
<!-- onmousemove is an event which
occurs when someone hovers the mouse on
that particular element and calls
the function of javascript -->
<br />
<br />
<label>Without Focus: </label>
<input type="text" />
<br />
<br />
<input type="button" value="submit" />
</form>
<script type="text/javascript">
function myFunction() {
document
.getElementById("focus")
.focus();
}
</script>
</body>
</html>
Output:
JavaScript Focus() Method Example Output
Explanation:
This HTML code creates a form with two text input fields and a button. When the mouse hovers over the first input field, `myFunction()` is called, which uses JavaScript’s `focus()` method to give focus to that input field, making it active for user interaction.
The focus field can be removed with the help of the blur() method in javascript. Illustration of blur method on clicking a field.
Example 2: In this example, we will focus on a text input field by clicking a button and remove the focus by clicking the remove focus button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<title>Document</title>
</head>
<body>
<input
type="button"
onclick="setFocus()"
value="set focus"
/>
<input
type="button"
onclick="removeFocus()"
value="remove focus"
/>
<br />
<br />
<input type="text" id="focus" />
<script type="text/javascript">
function setFocus() {
document
.getElementById("focus")
.focus();
}
function removeFocus() {
document
.getElementById("focus")
.blur();
}
</script>
</body>
</html>
Output:
JavaScript Focus() Method Example Output
Explanation:
This HTML code creates two buttons: “set focus” and “remove focus”, along with a text input field. Clicking “set focus” triggers the `setFocus()` function, which uses JavaScript’s `focus()` method to give focus to the text input. Clicking “remove focus” triggers the `removeFocus()` function, which uses `blur()` method to remove focus from the text input.
We have a complete list of Javascript Functions, to check those please go through Javascript Function Complete reference article.
Share your thoughts in the comments
Please Login to comment...