IE blocking html form fields

Question

On http://megsmoxie.com/2012/12/enter-to-win-a-fijit-friend-willa/ (or any single post) the search, subscribe, and comment forms do not work in Ineternet Explorer.

You can click in them and see the cursor for a second, then it seems to lose the focus, so I assume it's not an overlapping div issue. If you press a key as soon you click, you can enter one letter, but then it loses focus. It works fine in chrome and ff.

Oddly enough, the problem does not occur in ie on http://megsmoxie.com/contact/ or the homepage (sidebar forms work fine as well as contact form), the issue is only on single posts. Any help would be much appreciated.

Answer 1

I looked over this page and found a lot going on. This is most likely due to some contention with the onfocus events being fired all over the place. IE is notoriously bad at handling the onfocus event in particular.

In addition there seems to be some third party scripts and controls that are firing. Its very possible that one of those is stealing focus from the text boxes in IE only.

Not much more I can tell you beyond that. If you are the developer of this site you are going to need to do some more in depth debugging. Try eliminating some of the stuff going on and adding it back one by one until it breaks again or debugging some of the javascript.

Answer 2

You'll note that if you click and hold your mouse down, you can type into the field without interruption. It's only when you release your mouse button that the focus is stolen, and you can no longer type. With this behavioral observation, I took to Chrome to see what events are being handled:

I found that the document has a handler for the mouseup event, and that this code was coming from icx-ez-excerpt.js . Tracking this back through your document, you can find the relevant references below (removing these, sure enough, resolved the issue):

<script type="text/javascript">
    var icx_publication_id = 10591;
    var icx_copyright_notice = 'Copyright 2012 Meg&#039;s Moxie';
    var icx_content_id = '30168';
</script>
<script type="text/javascript"
        src="http://license.icopyright.net/rights/js/copyright-notice.js">
</script>

Remove that, and the code works as expected in IE. I'll dig a bit further to find out what, in their code , is breaking the experience for your users.