Form fields in custom controls are disabled in IE 7
I have a custom control which contains a form. Works fine Mac/Win Firefox and in Mac Safari (haven't tested Win Safari), but in IE 7 the text fields (and textarea) are disabled. Buttons work fine. Here's a demo (click the "show/hide form" link below the image to show the form):
http://www.chrisbartley.com/seadragon...
My IE 7 is version 7.0.5730.11 on Windows XP Pro sp 2.
If you have a look at the source, you'll see that I'm using jquery to clone the contents of the form from an existing (and hidden) form elsewhere on the page (and that other form, btw, if I make it visible by not setting style="display:none", works fine...that is, the text field is not disabled...it's only the cloned one added to the viewer as a control which is broken). I thought the cloning might be introducing some weirdness, so I tried recreating the form every time its shown, but that made no difference.
I also tried explicitly setting the input's disabled attribute to false (with jquery, using something like $("#blah_blah").attr("disabled", false)), but that didn't make any difference either.
Are there examples anywhere of text fields in controls which work in IE? Or any clues as to what I might be doing wrong?
thanks heaps,
Chris
http://www.chrisbartley.com/seadragon...
My IE 7 is version 7.0.5730.11 on Windows XP Pro sp 2.
If you have a look at the source, you'll see that I'm using jquery to clone the contents of the form from an existing (and hidden) form elsewhere on the page (and that other form, btw, if I make it visible by not setting style="display:none", works fine...that is, the text field is not disabled...it's only the cloned one added to the viewer as a control which is broken). I thought the cloning might be introducing some weirdness, so I tried recreating the form every time its shown, but that made no difference.
I also tried explicitly setting the input's disabled attribute to false (with jquery, using something like $("#blah_blah").attr("disabled", false)), but that didn't make any difference either.
Are there examples anywhere of text fields in controls which work in IE? Or any clues as to what I might be doing wrong?
thanks heaps,
Chris
1
person has this problem
I have this problem, too!
Tell me when someone solves it.
The more people who report this problem, the more it gets noticed.
The more people who report this problem, the more it gets noticed.
The company marked this problem solved.
-
Inappropriate?You try simply creating a new dialog_window without display:none?
dialogWindow = $('<div class="dialog_window">....</div>').get()[0]; -
Inappropriate?@Scott: yep, thanks, I tried that but it doesn't help. Here's the test:
http://www.chrisbartley.com/seadragon...
best,
Chris -
Inappropriate?Alright, I've found a workaround. If you add an onclick to the text input which sets the focus, then it works. Something like this will work (yeah, yeah, I know that $.browser is deprecated in jquery 1.3...):
onclick="if ($.browser.msie) {this.focus(); this.select();}"
Here's a live demo:
http://www.chrisbartley.com/seadragon...
Ugly, but it works.
Chris
I’m happy this is resolved but regretful that I can't get back all the time I've wasted on IE.
-
Inappropriate?Wow, good find!
I faced a similar issue a while back. My app also had a text input as part of a control, but the difference in mine was that I had initial starter text in there (e.g. "Search"). If I clicked on the text, the input worked fine, but clicking off the text did nothing. In your case, you have no initial text in the input, so it's probably the same problem I faced when clicking off the text.
Thanks for the tip! One question: do you really need to select() in addition to focus()? Or is focus() enough? If so, I don't see why you need to browser-detect for IE either; no harm in focusing on click in every browser (which is the default behavior in other browsers anyway, no?).
I’m in full agreement about IE...
-
Inappropriate?Hi Aseem,
Well heck. :-) I could've sworn that simply doing a focus() regardless of the browser resulted in some sort of non-optimal behavior on non-IE browsers. I sure can't seem to reproduce it now though!
Oh, maybe it was because I wanted to add the select() for IE 6 since merely doing a focus() doesn't make it too obvious that the field has focus since the cursor is always placed at the very beginning of the text. And I guess I figured that if there was already text in there and you re-focused on it then you probably wanted to edit it so pre-selecting it might be useful. I honestly can't remember anymore. :-)
It appears, though, that simply doing a focus() for all browsers is probably good enough. IE 7 ends up behaving like non-IE browsers in that when you click on the text field, the cursor is placed exactly where you clicked, e.g. in the middle of a word/sentence. That's nice for when you want to edit the word you clicked on. Oh, that's only apparently true for IE 7 with text inputs, not textareas. Oh well.
Thanks for setting me straight--I'm off to remove the browser detection. :-)
Chris
I’m thankful
Loading Profile...




EMPLOYEE