javascript enable input on double click

Question

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/

duplicate, you'll find solution here: http://stackoverflow.com/questions/3100319/jquery-event-on-a-disabled-input — valentinas, Jul 03 '12 at 23:51
Not everyone uses jQuery. Also, I'm looking for a non-wrap solution. — Umbrella, Jul 03 '12 at 23:53

score 23 · Accepted Answer · answered Jul 03 '12 at 23:54

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/

answered Jul 03 '12 at 23:54

JonWarnerNet

1,112
9
19

Yes, this is a preferred solution. Thank you. – Umbrella Jul 03 '12 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 '17 at 14:00

score 5 · Answer 2 · answered Jul 03 '12 at 23:50

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>

answered Jul 03 '12 at 23:50

Gabe

49,577
28
142
181

I'm looking for a non-wrap solution. – Umbrella Jul 03 '12 at 23:53
There is not a non-wrap solution if you're using the native disabled state of an element. – Gabe Jul 03 '12 at 23:54
Doesn't work on Firefox Nightly 16 when dblclicking in the input. Funny how it works even in IE though. – Fabrício Matté Jul 03 '12 at 23:59
It's a workable solution, but if I were going to wrap, I would write it leaner as: `` – Umbrella Jul 04 '12 at 00:01
1

@Umbrella that's undoubtedly tidier. But still doesn't work on Firefox, to whom that may concern. – Fabrício Matté Jul 04 '12 at 00:03

score 2 · Answer 3 · edited Dec 03 '22 at 16:37

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='';"

edited Dec 03 '22 at 16:37

Syed M. Sannan

1,061
2
9
28

answered Aug 21 '21 at 13:53

Emani

21
1

score -1 · Answer 4 · answered May 01 '21 at 06:02

-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/>

answered May 01 '21 at 06:02

extraCapacitor

1

javascript enable input on double click

4 Answers4

Linked