set focus in textbox under ajaxComplete() function causing issues

Question

I am sending ajax post request while clicking on radio button.

 // Get phone number if user selects phone option
    $('.rdoPhone').click(function () {
   if ($('.rdoPhone').is(':checked')) {
       $(".clsEmail_Number").attr('maxlength', '10').focus();
    }
});

Required functionality:
Focus should move to below texbox when I send ajax request on clicking radio button ('.rdoPhone')

<input type="text" class="clsEmail_Number" id="clsEmail_Number" style="width: 194px"
            name="clsEmail_Number" value="" /> 

But, after ajax request focus() of textbox shifts to first textbox of the page because of below code.

$(document).ajaxComplete(function (event, xhr, settings) {
        window.setTimeout(function () { $("input[type='text']:visible:first").focus(); }, 0);
});

How can I make sure that my code also work along with $(document).ajaxComplete()

Thanks

Answer 1

I have one solution for the same. But I am also looking for better options (for best option).

Thanks,

Below is the code I used to solve this case.

$(document).ajaxComplete(function (event, xhr, settings) {
    window.setTimeout(function () {
        if ($('.rdoEmail').is(':checked') || $('.rdoPhone').is(':checked')) {
            $(".clsEmail_Number").focus();
        }
        else {
            $("input[type='text']:visible:first").focus();
        }
    }, 0);
});

Answer 2

Instead of setting focus in ajaxComplete you can try this

 $( document ).ready(function() {
  window.setTimeout(function () { $("input[type='text']:visible:first").focus(); }, 0);
});