3

This should be pretty straightforward:

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled=false;">

If I place the mouse cursor over this button, it gets disabled..yay! But now when I move the cursor out, it doesn't get enabled...boo.

I understand the concept of disabling it means you can't do anything with it. But how do you get it to be enabled with a mouse out? Is it possible? Am I missing something?

THelper
  • 15,333
  • 6
  • 64
  • 104
Loony2nz
  • 4,691
  • 6
  • 28
  • 31

4 Answers4

5

You should set the mouseout to disabled = '' instead.

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled='';">

The disabled property only looks to see if it's there at all. You can set disabled='anything' and it will be disabled. It used to be that you only needed the keyword disabled in your attributes but for valid XHTML you need to set every attribute equal to something.

EDIT: I played around with this a little bit and added some padding to the SPAN tag and it allows the events to work properly. Without padding, it's not trapping the events because the input button is disabled. I just made the background red so it was easy to see the area the SPAN used up.

<span style="padding: 8px; background: red;"  onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>
Shawn Steward
  • 6,773
  • 3
  • 24
  • 45
  • @Shawn: Thanks for that, but unfortunately, that doesn't work either :( – Loony2nz Nov 16 '09 at 19:26
  • As others have said, the events won't fire once it is disabled. You can wrap it in a span tag, but that acts a little funky because of the way events bubble up. Are you using any javascript frameworks like MooTools or jQuery? – Shawn Steward Nov 16 '09 at 20:52
  • @Shawn: Unfortunately, no. yeah it would have been nicer, cleaner, and unobtrusive had I had a framework, which is why I posted this, the old fashioned way (a.k.a. old skool). I'll give your code a try. Thanks for your input! – Loony2nz Nov 17 '09 at 01:27
  • That worked for me in IE8, FF2 and Chrome. It may work better if you use a CSS styled link button instead of an input button if you can do that. – Shawn Steward Nov 17 '09 at 15:13
3

Divs to the Rescue!

Too bad no one has really answered this question. It is possible to do*.

<div style="display: inline-block; position: relative">
<input type="button" id="button" disabled="disabled">
<div id="buttonMouseCatcher" style="position:absolute; z-index: 1;
  top: 0px; bottom: 0px; left: 0px; right: 0px;">
</div>

Then:

  • Put a mouse-over handler on buttonMouseCatcher that:
    • changes it's z-index to -1 and
    • enables the button.
  • Put a mouse-out handler on button that:
    • changes the z-index of buttonMouseCatcher back to 1 and
    • disables the button.
Kyle Butt
  • 9,340
  • 3
  • 22
  • 15
1

Disabled form elements don't fire mouse events, by the spec.

What I use as a workaround is to simulate the disabled behavior with a 'disabled' class and event handles associate with it. Works well for buttons, but I suppose it wouldn't for text inputs and checkboxes.

Bruno Bergher
  • 11
  • 1
0

you could have an outer element that surrounds it and have an onmouseover for that outer element that enables the inner element.

Brian Schroth
  • 2,447
  • 1
  • 15
  • 26