jQuery中的焦点方法不起作用

时间:2012-07-08 03:12:59

标签: javascript jquery

以下代码旨在检查模糊字段中是否输入了4个数字。如果不是,则删除字段值,并且该字段被聚焦。删除工作正常,但对focus()的调用不起作用。

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

为什么对focus()的调用不关注该字段?

5 个答案:

答案 0 :(得分:18)

由于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);
    };
});​

这是小提琴:http://jsfiddle.net/TdfFs/


更新:为了证明此在Chrome中运行,我又做了一个小提琴:http://jsfiddle.net/TdfFs/1/

答案 1 :(得分:1)

演示 http://jsfiddle.net/dsaSX/3/

尝试使用this.value代替$(this).attr(...)

休息希望这有助于事业,:)

哦,如果您使用的是Jquery 1.7及更高版本,我已使用.on事件。

阅读本文:What's the difference between jQuery .val() and .attr('value')?

请在此处阅读 http://forum.jquery.com/topic/jquery-focus-after-blur

另一个已知论坛 使用SetTimeOut的解决方案 http://forum.jquery.com/topic/focus-inside-a-blur-handler,请参阅下面的帖子

<强>码

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

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

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

答案 2 :(得分:0)

而不是模糊使用焦点

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


<强>提示:

缩进代码

而不是attr,值使用$ .val('')

关于使用IF(),请使用brakets {}

尽可能简单地写清楚,这样你以后就不会感到困惑。

快乐编码:)

答案 3 :(得分:0)

细节,

大多数时候我都会读到这样的问题。 这通常是因为事件不正确。 在要求系统将重点放在某些内容之前,请确保您的页面已处理完毕。

此处举例说明 事件页面展示比pagebeforeshow更好的地方

不像这样

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

像这样工作

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

答案 4 :(得分:0)

如果你正在使用Bootstrap模式,这不起作用:

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

因为绘制模态需要一些时间并且可用于聚焦...我发现400ms的超时足够快以至于用户不会受到影响并且足够慢以至于总是聚焦关于元素。

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

实际上使用可执行注释并不会有什么坏处:

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