Reputation: 1469

The focus method in jQuery doesn't work

The following code is intended to check if 4 numbers are entered in the blurred field. If not, the field value is deleted, and the field is focused. The deletion works fine, but the the call to focus() does not work.

$('input.dateValue').live('blur',function(event){
  if (!(/(\d){4}$/.test($(this).attr('value')))) $(this).attr('value','').focus();
});

Why does the call to focus() not focus the field?

Upvotes: 6

Answers (5)

MustModify

Reputation: 697

If you're using Bootstrap modals, this does not work:

$('#modalID').modal('show');
$('#modalID #fieldID').focus();

because it takes a bit for the modal to be drawn and to be available for focusing... I have found that a timeout of 400ms is fast enough that users won't be affected and slow enough that it always focuses on the element.

$('#modalID').modal('show');
setTimeout(function(){  $('#modalID #fieldID').focus(); }, 400);

And actually it wouldn't hurt to use executable comments:

function wait_for_modal_to_be_drawn_then( fn )
{
  setTimeout( fn, 400 );
}

$('#modalID').modal('show');
wait_for_modal_to_draw_then( 
     function(){  $('#modalID #fieldID').focus(); } 
);

Upvotes: 0

user1441929

Reputation: 21

Little detail,

Most of the time I read such problem. It is often because the event is not correct. Be sure that your page is processed before asking the system to set the focus on something.

Here an example where the event pageshow is a better place than pagebeforeshow

DOES NOT WORK LIKE THIS

/**
 *** a hook to handle list drawing. DOES NOT WORK**
 */
$(document).delegate('#dropdownPopupWindow', "pagebeforeshow", function() {
    console.log(UIPopup.TAG+"pagebeforeshow on popup dropdownPopupWindow is setting focus on field field_dropdown_label");
    $('#field_dropdown_label').focus();
});

WORK LIKE THIS

/**
 *** a hook to handle list drawing.**
 */
$(document).delegate('#dropdownPopupWindow', "pageshow", function() {
    console.log(UIPopup.TAG+"pageshow on popup dropdownPopupWindow is setting focus on field field_dropdown_label");
    $('#field_dropdown_label').focus();
});

Upvotes: 0

Tats_innit

Reputation: 34117

Demo http://jsfiddle.net/dsaSX/3/

Try using this.value instead of $(this).attr(...)

Rest hope this helps the cause, :)

Oh and I have used .on event if you are using Jquery 1.7 and above.

Read this: What's the difference between jQuery .val() and .attr('value')?

Read here http://forum.jquery.com/topic/jquery-focus-after-blur

And another Known Forum Solution with SetTimeOut http://forum.jquery.com/topic/focus-inside-a-blur-handler see post below

code

$('input.dateValue').on('blur', function(event) {

    if (!(/(\d){4}$/.test(this.value))) {

        $(this).val('').focus();
    };
});

Upvotes: 1

Joseph Silber

Reputation: 220136

Since the blur event fires before the actual loss of focus, you cannot use .focus() right away. You have to push it down the stack, so that it executes after the input has lost focus. Put your .focus() in a timer (no delay necessary):

$('input.dateValue').on('blur', function(event)
{
    if ( ! /(\d){4}$/.test(this.value) )
    {
        var $this = $(this).val('');

        setTimeout(function (){
            $this.focus();
        }, 0);
    };
});

Here's the fiddle: http://jsfiddle.net/TdfFs/

Update: to demonstrate that this does work in Chrome, I made another fiddle: http://jsfiddle.net/TdfFs/1/

Upvotes: 18