Languages
[Edit]
EN

JavaScript - onblur event example

0 points
Created by:
starcraf35
364

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

Quick solution:

var myElement = document.querySelector('#my-element');

myElement.addEventListener('blur', function() {
    console.log('onblur event occurred.');
});

or:

<input type="text" onblur="handleBlur()">

or:

var myElement = document.querySelector('#my-element');

myElement.onblur = function() {
    console.log('onblur event occurred.');
};

 

Practical examples

There are three common ways how to use onblur event:

  • with event listener,
  • with element¬†attribute,
  • with element property.

In this example, we will execute handleBlur() when an input field loses focus (onblur event).

1. Event listener based example

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

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <body>
    <p>Click on the input field, then click outside it.</p>
    <input type="text" id="my-input">
    <script>
      var myInput = document.querySelector('#my-input');

      myInput.addEventListener('blur', function() {
        console.log('onblur event occurred.');
      });

      function handleBlur(){
        console.log('onblur event occurred.');
      }
    </script>
  </body>
</html>

2. Attribute based example

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

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <body>
    <p>Click on the input field, then click outside it.</p>
    <input type="text" onblur="handleBlur()">
    <script>
      function handleBlur(){
        console.log('onblur event occurred.');
      }
    </script>
  </body>
</html>

3. Property based example

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

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
  <body>
    <p>Click on the input field, then click outside it.</p>
    <input type="text" id="my-input">
    <script>
      var myInput = document.querySelector('#my-input');

      myInput.onblur = function(){
        console.log('onblur event occurred.');
      }
    </script>
  </body>
</html>

JavaScript - events

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join