JavaScript | Focus()
To better understand the focus() method, look at its syntax below:
In this syntax:
- element: it is the reference of an HTML element inside JavaScript.
- options: it is not a required parameter.
Example 1: Focusing on a Text Field Using the focus() Method
Start by creating a new HTML document, and in that document, create an input field and a button with the following lines:
<input type="text" id="TF1" placeholder="I am a textField" />
<button id="btn1" onclick="buttonClicked()">
Focus on the text field
</button>
</center>
In the above lines:
- Input tag has been given the id as “TF1”
- Button has the id as “btn1” and an onclick attribute set equal to “buttonClicked()”
Running this HTML document displays the following on the browser:
The text field and button are both displayed on the webpage. Now to add the functionality upon button press, add the following lines in the JavaScript file:
tf = document.getElementById("TF1");
tf.focus();
}
In the above JavaScript lines:
- First create a function named as buttonClicked()
- In that function, get the reference of the text field by using its Id and store that reference in the “tf” variable
- After that, simply call the focus() method with the “tf” variable with the help of the dot operator
At this point, webpage produces the following outcome:
It is observable in the output, that pressing the putting puts the text field as active or “in focus”.
Example 2: Focusing on an Element With “options” Arguments
In this example, the main goal is to have an element at a scrollable position. After that, the button should not only focus on that element but also bring that element into view from the document.
Start by creating an HTML document, and just like in the first example, create a text field and a button with the following lines:
<input
type="text"
id="TF1"
class="scrolled"
placeholder="I am a textField"
/>
<button id="btn1" onclick="buttonClicked()">
Focus on the text field
</button>
</center>
In these lines the only difference is:
- The input that now has a class “scrolled”, which will be used to place this input tag at a scrollable position in the document
After that, add the following lines to the CSS file or in the <style> tag:
height: 7000px;
}
.scrolled {
position: absolute;
top: 4000px;
}
In the lines mentioned above:
- The <body> of the document has been a height of 7000px so that the document becomes scrollable
- After that, we are setting the element with the scrolled class to an absolute position of 4000px from the top
Running this HTML document give the following webpage on the browser:
From the output, it is clear that the text field is now placed at a position of 4000px from the top.
After that, we are going to add the following lines of JavaScript:
tf = document.getElementById("TF1");
tf.focus({ preventScroll: false });
}
In these lines:
- A function buttonClicked() is made
- In that function, a reference to the text field is made by using its ID and stored inside the variable “tf”.
- After that, apply the focus() method on the text field and in its argument pass {preventScroll:false}. This will bring the element in focus and scroll the document to bring that element in view.
Run the HTML document, and you will get the following result upon clicking the button:
It is observable from the output that upon clicking the button, the text field is brought into the view of the browser by scrolling the document. Moreover, the text field is now being focused on.
Conclusion
This article throws light on the purpose and the working of the focus() method in JavaScript. This method is used to bring an element of the HTML document into focus, or in much simpler words, it sets their active property as true. To apply this method, simply use it with the reference of the HTML element with a dot operator. This focus method can also take in an optional argument which has been demonstrated above.
Source: linuxhint.com