Blur events on non-form elements

In this example below you will see how to do a Blur events on non-form elements with some HTML / CSS and Javascript

Turns out, all you need is a tabindex attribute.

Thumbnail
This awesome code was written by SammyJ, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SammyJ ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Blur events on non-form elements</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body { 
	display: flex;
	justify-content: space-around;
}
div { 
	background: grey;
	width: 400px;
	height: 400px;	
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div tabindex="1"></div>
<div></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/SammyJ/blur-events-on-non-form-elements-ZrLyBg */
body { 
	display: flex;
	justify-content: space-around;
}
div { 
	background: grey;
	width: 400px;
	height: 400px;	
}

/*Downloaded from https://www.codeseek.co/SammyJ/blur-events-on-non-form-elements-ZrLyBg */
$('div').on('blur', function() {
	alert('blur detected!')
});

Comments