Skip to main content

Bug Tracker

Side navigation

#6686 closed bug (invalid)

Opened June 17, 2010 06:10PM UTC

Closed December 02, 2010 08:08AM UTC

Last modified March 13, 2012 08:09PM UTC

IE8 Change Event issue with Jquery 1.4.2

Reported by: budigelli Owned by: budigelli
Priority: undecided Milestone: 1.4.2
Component: event Version: 1.4.2
Keywords: needsreview, IE8 textbox change Cc:
Blocked by: Blocking:

This issue is specific to 1.4.2 and fine with 1.3.2.

I have textbox with some watermark applied and as I go in and out of it, with out changing any text, it is raising onchange on IE8.

You could simply produce this with jQuery watermark plugin

Here is whats happening.

1. Load textbox with empty/blank value.

2. Wireup an event handler for focus event that clears the value if its not the watermark value we provided

3. Wireup an event handler for blur event that puts watermark value in to the textbox if the value is not empty.

4. Wireup an event handler to do same as blur event

5. Set some watermark value to this textbox using JS.

Here is whats happening:

1. Page loads with textbox

2. JS plug-in puts in watermark value in to the textbox (No on change fires)

3. On focus, JS plug-in clears watermark value.

4. On blur, JS plug-in puts the watermark value back.

IE fires change event at this time; Firefox does not. As IE fires Change event before blur. This same code worked in jQuery 1.3.2.

This is from Microsoft documentation...

They quote "This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather when the user commits the change by leaving the text box that has focus. In addition, this event is executed before the code specified by onblur when the control is also losing the focus."

Attachments (0)
Change History (6)

Changed June 17, 2010 10:12PM UTC by dmethvin comment:1

component: unfiledevent

Just for some more background, the W3C says this:

The change event occurs when a control loses the input focus and its value has been modified since gaining focus.

I'm not sure if the W3C specifies the order in which the blur/change events should fire, although Microsoft does as you pointed out.

Most likely, this behavior change was introduced when fixing the problem that IE's native change event doesn't bubble, although the W3C says it should. Original commit for that is here:

As for the plugin, a better approach would be to layer an element over the empty input with the hint. Changing the actual content may confuse form fillers, since they will "see" your hints as input.

Changed June 18, 2010 12:48AM UTC by dmethvin comment:2

Changed June 18, 2010 03:46AM UTC by budigelli comment:3

Replying to [comment:2 dmethvin]:

Hi Dmethvin,

Thank you for your prompt response. I took a quick look at your alternative and It does not seem to work on fields that already have labels for them.

For most of the fields I am applying the watermark for already have labels.

Date : TextBox1 and watermark is usually the format of accepted date.

So, "Date" is already a label for TextBox1. With your proposed technique, I would need to have two labels one with properly marked class. For long forms, we could end up with lot of extra mark up.

Thanks for pointing out that link though. Nice trick. I will keep it in mind going forward.

Changed October 29, 2010 04:52PM UTC by rwaldron comment:4

owner: → budigelli
priority: → undecided
status: newpending

Please provide a reduced jsFiddle test case, thanks!

Additionally, test against the jQuery 0 GIT version to ensure the issue still exists.

Changed October 29, 2010 05:00PM UTC by rwaldron comment:5

keywords: IE8 textbox changeneedsreview, IE8 textbox change

Changed December 02, 2010 08:08AM UTC by trac-o-bot comment:6

resolution: → invalid
status: pendingclosed

Automatically closed due to 14 days of inactivity.