Disabled form element and oncontextmenu issue

we have an issue where a disabled form element (input, textarea, ...) does not react to a right-click action (oncontextmenu attribute). Everything works fine when the form element is enabled. Please consider the following pseudo-code:

<div id="test" oncontextmenu="someFunction()">
  <input id="textbox" type="text" disabled="disabled">
  SOME_PADDING
  <input id="calendar" type="image" disabled="disabled">
</d开发者_运维问答iv>

The real catch is it does not work in Chrome and Firefox, but it does work in IE8 and Opera.

When we right-click on the textbox or calendar elements in Chrome or Firefox, nothing happens. If we click in between the elements (SOME_PADDING) then the right-click menu does appear.

Hence it seems as if a right-click action on a disabled form does not work in Chrome and Firefox. Has anyone experienced a similar behaviour before?

Thanks in advance!

Stijn

EDIT: As mentioned by Pekka, a disabled form element not reacting to a right-click does make sense. The real issue seems to be the oncontextmenu attribute of the div around it not reacting properly when clicking on a disabled form element in Firefox / Chrome.

EDIT2: Online example can be found here: http://jsbin.com/isite4/6 - This works in all but IE8. Any proposed work-arounds to force IE to behave normally?

Hmmmm, interesting. Never seen this before. It could be argued that it is not entirely wrong to hide the context menu, though. The W3C has the following to say about disabled controls:

• Disabled controls do not receive focus.
• Disabled controls are skipped in tabbing navigation.
• Disabled controls cannot be successful.

and about receiving focus:

In an HTML document, an element must receive focus from the user in order to become active and perform its tasks.

So the behaviour shown by Chrome and FF kind of makes sense IMO.

Ideas for how to work around it:

• Put a transparent element on top of the input element, and catch the event there (yuck)

• Use z-index: -1 to put the disabled element behind the container - not sure whether this works across browsers though

• Do not work with the disabled attribute, but use CSS styling and a jQuery workaround to prevent those controls' values from being submitted

The latter would be the best suggestion, I think.

We opted for a work-around, as their doesn't seem to be a straight-forward approach. We decided to add an image over the disabled form element, that responds to a normal left-click.

There is a simpler way that I have used and that was to readonly the element instead of disabling it. If the 'look' might confuse your users, just match the "disabled" colours with css on the element. I know it is not relevant to the original poster but anyone else who comes looking might benefit.