4

I have a disabled input tag in which the cursor property is text;

<input type="text" value='1111' style='cursor:text' disabled>

When I click on that input I want the disabled attribute to be removed. but things seems doesn't work.

input.addEventListener('click', function () {
input.disabled = false})
Improve this question

2 Answers 2

Reset to default
7

Wrap the <input> in another element and bind the event to that. Add CSS property pointer-events: none to <input> so that the <label> is the only element recognizing the click, or mouse event (see Kaiido's comments).

document.querySelector('label').onclick = e => {
  const input = e.currentTarget.firstElementChild;
  input.disabled = false;
  input.style.pointerEvents = 'auto';
}
<label style='cursor: not-allowed'>
  <input type='text' style='cursor: text; pointer-events: none' value='Click to enable' disabled>
</label>

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

2 Comments

Is this working anywhere? The click event on the <input> should be stopped and thus the should never bubble up the <label>. You should have to click outside of the <input> to receive the bubbling event. That's what happens on my FF and Chrome on macOS.
You may want to have a look at stackoverflow.com/questions/73160594/… This solution doesn't work in Firefox, nor in Chrome with some flags and it shouldn't work per specs. For the cursor, you should be able to set it on the label, when the input isn't disabled it will win: jsfiddle.net/72re9zLn
3

How do click events work on disabled input field in javascript?

The spec says:

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

Because the disabled element isn't receiving the click event, you can wrap it in an element and add a click event listener to that wrapper instead:

Note that (as Kaiido pointed out in a comment), disabling pointer events on disabled elements is required to make this work according to spec, using the style declaration [disabled] { pointer-events: none; }

[disabled] { pointer-events: none; }
<label>
  <input type="text" value='1111' disabled />
</label>

<script type="module">

const label = document.querySelector('label');
const input = label.querySelector(':scope > input');

label.addEventListener('click', () => {
  input.disabled = false;
  input.focus();
});

</script>

Improve this answer

7 Comments

Is this working anywhere? The click event on the <input> should be stopped and thus the should never bubble up the <label>. You should have to click outside of the <input> to receive the bubbling event. That's what happens on my FF and Chrome on macOS.
@Kaiido Can you elaborate? The spec states that activation behavior for labelled controls is platform-defined.
No it states "The activation behavior of a label element for events targeted at interactive content descendants of a label element, and any descendants of those interactive content descendants, must be to do nothing." The <input> in that case is an interactive content descendant of the label element, thus the click on the label should be ignored, so that the input receives it. At receiving of this event the input should cancel the click event since it's disabled. Can you confirm that your snippet does work for you? And if so, please could you share your config?
@Kaiido Yes, it reproduces: i.sstatic.net/bevrk.gif I'm using Chrome 103.0.5060.134 (macOS)
Yes it does work
|

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.