Focus method in jQuery not working

Question

The following code is for checking the input of four numbers into a blurry field. If not, the field value will be deleted and the field will be focused. Deletion is fine, but the focus () call does not work.

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

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

Answer 1

Since the blur event fires before the actual loss of focus, you cannot immediately use .focus() . You must push it down the stack so that it runs after input lost focus. Put your .focus() in a timer (no delay):

 $('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 works in Chrome, I made another script: http://jsfiddle.net/TdfFs/1/

Answer 2

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

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

Wish it helps, :)

Oh, and I used the .on event if you are using jQuery 1.7 and above.

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

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

And another well-known forum Solution with SetTimeOut http://forum.jquery.com/topic/focus-inside-a-blur-handler see message below

the code

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

Answer 3

Use focus instead of blur

http://jsfiddle.net/fedmich/aKY9f/

---

Advice:

Indent Your Codes

Instead of attr, the value uses $ .val ('')

when using IF (), use brakets, please {}

Write as clean as possible so you don't get confused later.

Happy coding :)

Answer 4

Small detail

In most cases, I read such a problem. This often happens because the event is incorrect. Make sure your page is processed before requesting the system to focus on something.

Here is an example where event pages are better than pagebeforeshow

DOES NOT WORK AS IT

 /** *** 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 IT

 /** *** 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(); }); 

Answer 5

If you use Bootstrap modality, this does not work:

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

because it takes a little to get the modality to be available for focusing ... I found that the 400 ms timeout is fast enough so that users don't suffer and are slow enough so that it always focuses on the element.

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

And actually it would be awkward 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(); } );