[Edit]

JavaScript - onfocus event example

1 contributors

2 contributions

0 discussions

0 points

Created by:

Hayley-Mooney

677

In this article, we would like to show you onfocus event example in JavaScript.

Quick solution:

xxxxxxxxxx
 
var myElement = document.querySelector('#my-element');
​
myElement.addEventListener('focus', function() {
    console.log('onfocus event occurred.');
});

or:

xxxxxxxxxx
 
<input type="text" onfocus="handleFocus()">

or:

xxxxxxxxxx
 
var myElement = document.querySelector('#my-element');
​
myElement.onfocus = function() {
    console.log('onfocus event occurred.');
};

Practical examples

Edit

There are three common ways how to use onfocus event:

with event listener,
with element attribute,
with element property.

1. Event listener based example

Edit

In this section, we want to show how to use onfocus event on input element via event listener mechanism.

xxxxxxxxxx
 
<!doctype html>
<html>
  <body>
    <p>Click on the input field to set focus.</p>
    <input type="text" id="my-input">
    <script>
      var myInput = document.querySelector('#my-input');
​
      myInput.addEventListener('focus', function() {
        console.log('onfocus event occurred.');
      });
    </script>
  </body>
</html>

Auto running

2. Attribute based example

Edit

In this section, we want to show how to use onfocus event on input element via attribute.

xxxxxxxxxx
 
<!doctype html>
<html>
  <body>
    <p>Click on the input field to set focus.</p>
    <input type="text" onfocus="handleFocus()">
    <script>
      function handleFocus(){
        console.log('onfocus event occurred.');
      }
    </script>
  </body>
</html>

Auto running

3. Property based example

Edit

In this section, we want to show how to use onfocus event on input element via property.

xxxxxxxxxx
 
<!doctype html>
<html>
  <body>
    <p>Click on the input field to set focus.</p>
    <input type="text" id="my-input">
    <script>
      var myInput = document.querySelector('#my-input');
​
      myInput.onfocus = function() {
        console.log('onfocus event occurred.');
      };
    </script>
  </body>
</html>