Moving to the next input which was disabled and enabled onchange

Question

I have a disabled element which I enable it only after value was entered to it's previous input, the problem is that change triggers before the input lost focus and the focus moved to the next not disabled element, so removing the disabled attribute then is no good.

HTML:

Fill this before you continue:      <input id="a" />
Fill this after the previous input: <input id="b" disabled="disabled" />​

jQuery:

$('#a').change(function(){
    if (this.value === "")
        $('#b').attr('disabled', 'disabled');
    else
        $('#b').removeAttr('disabled');
});​

Fiddle

I manged to overcome this problem by changing from disabled to readonly but then it's readonly and not disabled as I preferred, are there good and robust(mouse proof) ways to achieve it and using readonly?

Things to consider:

• Subscribing to multiple events doesn't really seems right.
• The user can paste text to the 1st input without using keyboard at all.

Answer 1

You have said in your question that you don't want to subscribe to multiple events, but this is the only way I can think of to do this. The problem is that different ways of changing the value of the input all interface directly with the C/C++ DOM, but they do not do it through the JS API. See this question for more on this.

A reasonably bulletproof way of doing it while subscribing to multiple events would be:

$('#a').on('keyup paste propertychange input', function() {
    if (this.value === "") $('#b').prop('disabled', true);
    else $('#b').removeAttr('disabled');
});

Here is a demonstration: http://jsfiddle.net/HmzYR/

Answer 2

Have you considered adding an event on onkeydown or onkeyup?

If the users just needs to enter something you can add an event on onkeyup that does validation and sets the disabled property of the other input element.

I'm not sure about the order of events but onkeyup also fires after the focus has moved I would assume. But this shouldn't be much of problem in this case. One case I can think of is the following sequence of keys: "a" backspace tab. I suppose the perfect solution would be to use onkeydown and inspect the key before it's pressed, but it's hard to predict the effect of non-readable keys like backspace and arrowdown.

---

Another suggestion: attach an onkeydown listener and look for the tab key. Validate the value and enable the next input field.

---

In essence: you either need to catch all input events, or all events that change focus (like tab). And you must act before the events are completed.

Answer 3

Use prop and not attr:

$('#b').prop('disabled', true);

Also try hooking to the keyup event instead of the change event.

Here is a fiddle: http://jsfiddle.net/maniator/swubm/3/

For more explanations please see here: .prop() vs .attr()

---

Fiddle to handle cutting and pasting using mouseout: http://jsfiddle.net/maniator/swubm/4/ (based on comments below)

Answer 4

I updated my answer: http://jsfiddle.net/swubm/10/

Fill this before you continue:
<input id="a" />
<br>
<br>
Fill this after the previous input
<input id="b" disabled />​

JS:

$('#a').bind('input propertychange', function() {
    var value = $('#a').val();
    if (value == "")
        $('#b').attr('disabled', 'disabled');
    else
        $('#b').removeAttr('disabled');

});