Moving To The Next Input Which Was Disabled And Enabled Onchange

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

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

Solution 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.

Solution 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)

Solution 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');

});