javascript jQuery 中的 focus 方法不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11380392/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The focus method in jQuery doesn't work
提问by jela
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.
以下代码旨在检查是否在模糊字段中输入了 4 个数字。如果不是，则删除字段值，并聚焦该字段。删除工作正常，但对 focus() 的调用不起作用。
$('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?
为什么对 focus() 的调用不聚焦该字段？
回答by Joseph Silber
Since the blurevent 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 inputhas lost focus. Put your .focus()in a timer (no delay necessary):
由于blur事件在实际失去焦点之前触发，因此您不能立即使用.focus()。您必须将其推入堆栈，以便在input失去焦点后执行。把你.focus()的计时器（不需要延迟）：
$('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/
这是小提琴：http: //jsfiddle.net/TdfFs/
Update:to demonstrate that this does workin Chrome, I made another fiddle: http://jsfiddle.net/TdfFs/1/
更新：为了证明这在 Chrome 中确实有效，我制作了另一个小提琴：http: //jsfiddle.net/TdfFs/1/
回答by Tats_innit
Demohttp://jsfiddle.net/dsaSX/3/
演示http://jsfiddle.net/dsaSX/3/
Try using this.valueinstead of $(this).attr(...)
尝试使用this.value代替$(this).attr(...)
Rest hope this helps the cause, :)
休息希望这有助于事业， :)
Oh and I have used .onevent if you are using Jquery 1.7 and above.
哦，.on如果您使用的是 Jquery 1.7 及更高版本，我已经使用了事件。
Read this: What's the difference between jQuery .val() and .attr('value')?
请阅读：jQuery .val() 和 .attr('value') 之间的区别是什么？
Read herehttp://forum.jquery.com/topic/jquery-focus-after-blur
在这里阅读http://forum.jquery.com/topic/jquery-focus-after-blur
And another Known ForumSolution with SetTimeOuthttp://forum.jquery.com/topic/focus-inside-a-blur-handlersee post below
另一个已知的带有 SetTimeOut 的论坛解决方案http://forum.jquery.com/topic/focus-inside-a-blur-handler见下面的帖子
code
代码
$('input.dateValue').on('blur', function(event) {
if (!(/(\d){4}$/.test(this.value))) {
$(this).val('').focus();
};
});?
回答by fedmich
Instead of blur use focusout
而不是模糊使用focusout
http://jsfiddle.net/fedmich/aKY9f/
http://jsfiddle.net/fedmich/aKY9f/
Tips:
尖端：
Indent your codes
缩进你的代码
Instead of attr, value use $.val('')
而不是 attr，值使用 $.val('')
on using IF(), use brakets please {}
关于使用 IF()，请使用刹车{}
Write cleaner, simple as possible so you dont get confused later.
写得更干净，尽可能简单，以免以后混淆。
Happy Coding :)
快乐编码:)
回答by user1441929
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
这是一个示例，其中事件 pageshow 比 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();
});
回答by MustModify
If you're using Bootstrap modals, this does not work:
如果您使用的是 Bootstrap 模态，则这不起作用：
$('#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.
因为它需要一些时间来绘制模态并使其可用于聚焦......我发现 400 毫秒的超时足够快，用户不会受到影响，而且速度足够慢，以至于它始终专注于元素。
$('#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(); }
);
