12

I have a form with some inputs disabled. I want these inputs to be enabled when double clicked. Unfortunately, JS events seem not to fire on disabled inputs.

<input type="text" value="asdf" disabled="disabled" ondblclick="this.disabled=false;">​

Is there a way around this limitation?

Or am I just going to have to wrap any affected input in a span to house the event?

http://jsfiddle.net/vhktx/

2

4 Answers 4

23

ondblclick does not get fired on a disabled element, you should mark it as readonly:

<input type="text" value="asdf" readonly="true" ondblclick="this.readOnly='';">

http://jsfiddle.net/vhktx/4/

2
  • Yes, this is a preferred solution. Thank you.
    – Umbrella
    Jul 3, 2012 at 23:58
  • 4
    You can also add onblur="this.readOnly='true';" to make it return to its read-only state when clicked outside the input. And use the :read-only CSS tag to style the element while it's read-only vs editable.
    – johnozbay
    Feb 10, 2017 at 14:00
5

You will have to wrap the element in a container since the the event will not fire on disabled elements.

jsFiddle

<div ondblclick="document.getElementById('test').disabled=false;">
    <input type="text" id="test" value="asdf" disabled="disabled"></div>
5
  • I'm looking for a non-wrap solution.
    – Umbrella
    Jul 3, 2012 at 23:53
  • There is not a non-wrap solution if you're using the native disabled state of an element.
    – Gabe
    Jul 3, 2012 at 23:54
  • Doesn't work on Firefox Nightly 16 when dblclicking in the input. Funny how it works even in IE though. Jul 3, 2012 at 23:59
  • It's a workable solution, but if I were going to wrap, I would write it leaner as: <span ondblclick="this.childNodes[0].disabled=false;"><input type="text" value="asdf" disabled="disabled"></span>
    – Umbrella
    Jul 4, 2012 at 0:01
  • 1
    @Umbrella that's undoubtedly tidier. But still doesn't work on Firefox, to whom that may concern. Jul 4, 2012 at 0:03
2

The answer that is marked correct does not revert the input back to needing another double-click to edit again.

Add this onchange function to do so:

onchange="this.readOnly='true';"

The whole thing should be:

onchange="this.readOnly='true';" readonly="true" ondblclick="this.readOnly='';"
-1

this will do! works for me, As 'disabled' and 'readonly' appears almost the same(at least in bootstrap). inline scripts don't work with the disabled attr.

<input type="text" ondblclick="this.readOnly=false;" readonly/>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.