Internet Explorer 7 and blur (with input type=file)

Today I noticed an interesting issue with IE 7 and the blur event, when using the <input type=”file”> HTML widget. A friend called me to tell me that their web app is validating the form fields, when the user is pressing the native “Browse…” button. But only in IE 7 (well, I don’t have IE6 installed). Interesting…

A simple test case for that:

<form>
  <input id="file" type="file"
    onblur="alert('blur');"
    onchange="alert('file');" />
  <br/><br/>
  <button>Blah</button>
</form>

And indeed! In IE 7, the alert(‘blur’) is visible, when you hit the “Browse…” button. FF works fine. Please note that the widget was not focused before. Very annoying…But, as almost always there is a way around that This little jQuery-based hack helps to get rid of it (in the particular use case…):

<script>
$(document).ready(function(){
 $("#file").removeAttr("onblur");
});
</script>

Not a clean generic solution, but I think it does its job…

I personally haven’t noticed this bug before, but I am sure it is “known” since ages