The focus method is applied to the HTML element to direct the user's attention to a specific area. It is typically utilized with user-interface or input tags. This JavaScript function is beneficial for managing focus across multiple input fields on a webpage, ensuring a smooth user experience without any complexities.
Syntax
The syntax below demonstrates how to apply focus to a selector.
document.getElementById("myData").focus();
Description
The focus function utilizes the queryselector found in the HTML document. This method is applicable for both individual and multiple text input fields on the webpage.
Examples
The instances demonstrate the utilization of the focus function with various input varieties within the HTML element. Any selector or tag that interacts with users can be employed to trigger the focus event.
Example 1:
The focus function in JavaScript is employed to set focus on an input element, removing focus from any other element.
<!DOCTYPE html>
<html>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<input type = "text" id = "myData" value = "A text field">
<p> Click the buttons to apply or remove the focus method.</p>
<button type = "button" onclick = "applyFocus()"> Apply focus </button>
<button type = "button" onclick = "removeFocus()"> Remove focus </button>
<script>
function applyFocus() {
document.getElementById("myData").focus();
}
function removeFocus() {
document.getElementById("myData").blur();
}
</script>
</body>
</html>
Output
The provided result demonstrates how the focus method operates.
Example 2:
The focus function in JavaScript utilizes the <a> attribute in conjunction with the blur attribute to manage focus. This function is designed to handle focus validation for link or anchor tags.
<!DOCTYPE html>
<html>
<style>
a:focus, a:active {
color: red;
}
</style>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<a id = "myData" href="https://logic-practice.com">Visit logic-practice.com</a>
<p> Click the buttons to apply or remove the focus method.</p>
<button type = "button" onclick = "applyFocus()"> Apply focus </button>
<button type = "button" onclick = "removeFocus()"> Remove focus </button>
<script>
function applyFocus() {
document.getElementById("myData").focus();
}
function removeFocus() {
document.getElementById("myData").blur();
}
</script>
</body>
</html>
Output
The provided result demonstrates the functionality of the focus method.
Example 3:
The focus function in JavaScript is utilized to set the focus on an input element by removing the focus from another element. This functionality is triggered when the page finishes loading using an event. Subsequently, the focus event can be effortlessly removed by clicking a button.
<!DOCTYPE html>
<html>
<style>
a:focus, a:active {
color: red;
}
</style>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<a id = "myData" href="https://logic-practice.com"> Visit logic-practice.com </a> <br><br>
<input type = "text" id = "myData1" value = "A text field">
<p> Click the buttons to apply or remove the focus method.</p>
<button type = "button" onclick = "removeFocus()"> Remove focus </button>
<script>
window.onload = function() {
document.getElementById("myData").focus();
}
function removeFocus() {
document.getElementById("myData").blur();
}
</script>
</body>
</html>
Output
The provided result demonstrates the functionality of the focus method.
Example 4:
The focus function in JavaScript utilizes the <a> element in conjunction with the blur function. It is employed for validating textareas and dismissing the focus event through the use of the onclick handler.
<!DOCTYPE html>
<html>
<style>
textarea:focus{
color: red;
}
</style>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<textarea id = "myData1"></textarea>
<p> Click the buttons to apply or remove the focus method.</p>
<button type = "button" onclick = "applyFocus()"> Apply focus </button>
<button type = "button" onclick = "removeFocus()"> Remove focus </button>
<script>
function applyFocus() {
document.getElementById("myData1").focus();
}
function removeFocus() {
document.getElementById("myData1").blur();
}
</script>
</body>
</html>
Output
The provided output demonstrates how the focus method operates.
Example 5:
Simultaneously applying focus events to all elements is not feasible. The following example demonstrates how to manage multiple focus events across different interactive elements on a webpage.
<!DOCTYPE html>
<html>
<style>
textarea:focus{
color: red;
}
input:focus{
color: red;
}
form{
border: 1px solid black;
padding: 5px;
}
</style>
<body>
<h3> JavaScript focus() method </h3>
<p> Using the focus() method to focus on the tag using click event </p>
<p> Click the buttons to apply or remove the focus method.</p>
<form>
<label for = "uname">User Name:</label> <br>
<input type = "text" id = "uname" name = "uname"><br>
<label for = "cnt"> contact: </label> <br>
<input type = "text" id = "cnt" name = "cnt"> <br>
<label for = "cnt1"> Message: </label> <br>
<textarea id = "myData1"></textarea> <br>
<button type = "button" onclick = "applyFocus()"> Submit </button>
<button type = "button" onclick = "removeFocus()"> Clear </button>
</form>
<script>
function applyFocus() {
var vals1 = document.getElementById("uname").value;
var vals2 = document.getElementById("cnt").value;
var vals3 = document.getElementById("myData1").value;
if(vals1 == ''){
document.getElementById("uname").focus();
}
if(vals2 == ''){
document.getElementById("cnt").focus();
}
if(vals3 == ''){
document.getElementById("myData1").focus();
}
}
function removeFocus() {
document.getElementById("myData1").blur();
}
</script>
</body>
</html>
Output
The provided result demonstrates how the focus method operates.
Conclusion
The focus method is utilized in JavaScript to validate the input tag of an HTML form. By employing this method, we can submit data through a form and control the data that users input. This approach enhances the user experience by creating visually appealing and user-friendly web pages for efficient data operation and management.