File Under: JavaScript

JavaScript Event – Focus

This code was written based on a template by John Resig. The original can be found at John Resig’s addEvent function website.

The code, and the template, are referred to in Webmonkey’s JavaScript Events reference page. In this example, the onFocus event fires whenever a form field gains focus, such as with a mouse click inside it or tabbing from another field.

The Code

<html>

<head>

<script>

// addEvent function by John Resig:

// http://ejohn.org/projects/flexible-javascript-events/

function addEvent( obj, type, fn ) {

  if ( obj.attachEvent ) {

    obj['e'+type+fn] = fn;

    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}

    obj.attachEvent( 'on'+type, obj[type+fn] );

  } else

    obj.addEventListener( type, fn, false );

}

</script>

</head>

<body>



<!-- HTML for example event goes here -->

<input id="myinput" type="text" />



<script>

// Script for example event goes here

addEvent(document.getElementById('myinput'), 'focus', function(event) {

	alert('The element has focus');

});

</script>

</body>

</html>

What it Looks Like