Reputation: 1469
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
Views: 12529
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
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
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
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
Reputation: 5371
Instead of blur use focusout
http://jsfiddle.net/fedmich/aKY9f/
Tips:
Indent your codes
Instead of attr, value use $.val('')
on using IF(), use brakets please {}
Write cleaner, simple as possible so you dont get confused later.
Happy Coding :)
Upvotes: 0