Click event doesn't fire for disabled text field?

Question

I have a disabled text field that I want to become enabled when I click it. Unfortunately, it seems that the text field's click() event doesn't fire while it's disabled.

Is there a way around this?

Answer 1

Unfortunately, disabling a control also disables its events (it's by design).

To work around that limitation, you could add a <div> absolutely positioned above the <input> field (higher z-index) and attach the click() event to that <div>. Once clicked, dispose of the <div> and enable your <input>.

If you just want to prevent the user from changing the value of the <input>, use readonly instead of disabled. This will not disable the event handlers.

$('#myInput').attr('readonly', true);