Computer >> Computer tutorials >  >> Programming >> Javascript

How does JavaScript focus() method works?


focus()

Javascript focus() methods helps to highlight a HTML form element. It sets the element as an active element in the current document. In current documentation, focus can be applied to only one single element. The focus can be applied either to a text, a button, etc.  

syntax

element.focus(options);

Example

In the following example, initially, the text "Tutorialspoint" is in an anchor tag 'a', which as an id called 'focus'. Later on, a function is declared in which the id is called using a DOM method and focus() method is applied on it to change the color of text "Tutorialspoint" to red. Here a button is used for the click event.

<html>
<head>
<style>
   a:focus, a:active {
      color: red;
   }
</style>
</head>
<body>
<a href="https://www.tutorialspoint.com/" id="focus">Tutorialspoint</a>
<input type="button" value="getfocus" onclick="getfo()">
<script>
   function getfo() {
      document.getElementById("focus").focus();
   }
</script>
</body>
</html>

After executing the above code we will get the following image displayed on the screen.


How does JavaScript focus() method works?


Once we click on the get focus button we will get the following output.

Output

How does JavaScript focus() method works?