html onchange/onblur compatibility

Question

I am currently writing a web site which must be compatible with all browsers including IE back to version 6.

I was wondering about compatibility issues with these two events in particular: I am using them with a <input> tag with type='text'.

• OnBlur
• OnChange

Searching has found mixed responses and an incomplete list.

Specifically, the question is:

• Are there any known issues with the above two events (could be expanded to other HTML events)?
• If so, what methods can be used to work around these issues?

Any help much appreciated :)

Answer 1

All browsers should support these events pretty decently if you're only using them in text boxes. If you check out the QuirksMode event compatibility tables, you'll see that IE has some issues with the change event in radio buttons and check boxes.

If you're not very familiar with JavaScript events in browsers, you'll find that the event model is a mess thanks to the fact that IE decided to do things differently from the standard. To overcome this problem, you should be using a JavaScript framework like jQuery, YUI, Dojo, MooTools, ExtJS, or Closure. These frameworks smooth out the differences so you'll (almost) never have to deal with the differences & bugs in the different browsers. There is a great article on CodingHorror explaining why you should consider using a JavaScript framework if you plan on using JavaScript in your site that you should read if you're curious as to why you should use a JavaScript framework.

Also, if you're unfamiliar with browser events entirely, make sure you understand the difference between onchange and onblur.