How does JavaScript focus() method works?

Javascript Object Oriented Programming Front End Technology

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.

Live Demo

<html>
<head>
<style>
   a:focus, a:active {
      color: red;
   }
</style>
</head>
<body>
<a href="http://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.