Focus, Blur, and Change Events

Contact Us or call 1-877-932-8228
Focus, Blur, and Change Events

Focus, Blur, and Change Events

Focus, blur and change events can be used to improve the user experience.

Focus and Blur

Focus and blur events are caught with the onfocus and onblur event handlers. These events have corresponding focus() and blur() methods. The example below shows

  1. how to set focus on a field.
  2. how to capture when a user leaves a field.
  3. how to prevent focus on a field.

Code Sample:

FormValidation/Demos/FocusAndBlur.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Focus and Blur</title>
<script src="DateUDFs.js" type="text/javascript"></script>
<script type="text/javascript">
function getMonth(){
	var elemMonthNumber = document.DateForm.MonthNumber;
	var monthNumber = elemMonthNumber.value;
	
	var elemMonthName = document.DateForm.MonthName;
	var month = monthAsString(elemMonthNumber.value);
	
	elemMonthName.value = (monthNumber > 0 && monthNumber <=12) ? month : "Bad Number";
}
</script>
</head>
<body onload="document.DateForm.MonthNumber.focus();">
<h1>Month Check</h1>
<form name="DateForm">
	Month Number: 
	<input type="text" name="MonthNumber" size="2" onblur="getMonth();">
	Month Name:
	<input type="text" name="MonthName" size="10" onfocus="this.blur();">
</form>
</body>
</html>

Things to notice:

  1. When the document is loaded, the focus() method of the text field element is used to set focus on the MonthNumber element.
  2. When focus leaves the MonthNumber field, the onblur event handler captures the event and calls the getMonth() function.
  3. The onfocus event handler of the MonthName element triggers a call to the blur() method of this (the MonthName element itself) to prevent the user from focusing on the MonthName element.

Change

Change events are caught when the value of a text element changes or when the selected index of a select element changes. The example below shows how to capture a change event.

Code Sample:

FormValidation/Demos/Change.html
---- C O D E   O M I T T E D ----

<script src="DateUDFs.js" type="text/javascript"></script>
<script type="text/javascript">
	function getMonth(){
		var elemMonthNumber = document.DateForm.MonthNumber;
		var i = elemMonthNumber.selectedIndex;
		var monthNumber = elemMonthNumber[i].value;
		
		var elemMonthName = document.DateForm.MonthName;
		var month = monthAsString(monthNumber);
		
		elemMonthName.value = (i === 0) ? "" : month;
	}
</script>
</head>
<body onload="document.DateForm.MonthNumber.focus();">
<h1>Month Check</h1>
<form name="DateForm">
	Month Number: 
	<select name="MonthNumber" onchange="getMonth();">
		<option>--Choose--</option>
		<option value="1">1</option>
		<option value="2">2</option>
		
---- C O D E   O M I T T E D ----

		<option value="11">11</option>
		<option value="12">12</option>
	</select><br>
	Month Name: <input type="text" name="MonthName" size="10" 
					onfocus="this.blur();">
</form>
</body>
</html>

This is similar to the last example. The only major difference is that MonthNumber is a select menu instead of a text field and that the getMonth() function is called when a different option is selected.

Next