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: stackoverflow.com/questions/3100319/… — valentinas
– valentinas, Commented Jul 3, 2012 at 23:51
Not everyone uses jQuery. Also, I'm looking for a non-wrap solution. — Umbrella
– Umbrella, Commented Jul 3, 2012 at 23:53

JonWarnerNet · Accepted Answer · 2012-07-03 23:54:59Z

30

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 3, 2012 at 23:54

JonWarnerNet

1,19210 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Umbrella Over a year ago

Yes, this is a preferred solution. Thank you.

johnozbay Over a year ago

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.

Gabe · Accepted Answer · 2012-07-03 23:50:15Z

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 3, 2012 at 23:50

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

5 Comments

Umbrella Over a year ago

I'm looking for a non-wrap solution.

Gabe Over a year ago

There is not a non-wrap solution if you're using the native disabled state of an element.

Fabrício Matté Over a year ago

Doesn't work on Firefox Nightly 16 when dblclicking in the input. Funny how it works even in IE though.

Umbrella Over a year ago

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>

Fabrício Matté Over a year ago

@Umbrella that's undoubtedly tidier. But still doesn't work on Firefox, to whom that may concern.

Syed M. Sannan · Accepted Answer · 2022-12-03 16:37:20Z

3

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 3, 2022 at 16:37

Syed M. Sannan

1,3924 gold badges15 silver badges34 bronze badges

answered Aug 21, 2021 at 13:53

Emani

311 bronze badge

Comments

extraCapacitor · Accepted Answer · 2021-05-01 06:02:48Z

-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 1, 2021 at 6:02

extraCapacitor

1

Collectives™ on Stack Overflow

javascript enable input on double click

4 Answers 4

2 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related