.focus() not working from within .focus() event

Question

I am unable to successfully use .focus() from the focusout event, on the same element. I've tried it with a setTimeout as well. Any ideas?

    $(control).focusout(function (e) {
                    if ($(this).val().length > 0) {
                        for (var ii = 0; ii < sampleDTOList.length; ii++) {
                            if (sampleDTOList[ii]["controlId"] == $(this).attr("id")) {
                                if ($(this).val() <= parseFloat(sampleDTOList[ii]["maxValue"]) && $(this).val() >= parseFloat(sampleDTOList[ii]["minValue"])) {
                                    sampleDTOList[ii]["value"] = $(this).val();
                                    RunRulesOnSample(sampleDTOList[ii]);
                                    return;
                                }
                                else {
                                    $(this).val("");
                                    alert("You must enter a value between " + sampleDTOList[ii]["minValue"] + " and " + sampleDTOList[ii]["maxValue"] + ".");
                                    $(this).focus();
                                    return;
                                }
                            }
                        }
                    }
                });

on focus out you want to focus again based on condition!! – zod Jun 19 '13 at 23:22 — zod, Jun 19 '13 at 23:22

score 0 · Answer 1 · edited May 23 '17 at 11:56

I think it's not possible to directly call the focus function on a focusout event handler. Also, you can't say preventDefault() on the event object, because the focusout event is not cancelable.

But it seems you can use the setTimeout function:

$('#foo').focusout(function(e) {
    setTimeout(function() {
        $('#foo').focus();
    }, 10);
});

Check out this jsFiddle.

And you can also find a workaround which uses the mousedown event here

.focus() not working from within .focus() event

1 Answers1