Question

使用 jQuery 1.6.1 ，因为我有以下HTML：

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
</div>

当<input>中的<div class="control">（以下仅control ）聚焦时，<label>（ {{1}动画：。

position: relative;

当模糊时，$('.control :input').bind('focus', function(e){ $(this).prevAll('label').animate({ 'left': '-50px' }, 250); });会返回：

<label>

但是，如果其中一个.bind('blur', function(e){ $(this).prevAll('label').animate({ 'left': '0px' }, 250); });元素获得焦点，然后在焦点切换到同一<input>内的另一个<input>时模糊（ via Tab < / kbd>或鼠标点击）事件当然仍然会激发，control来回动画。

如果仅在给定<label>内的所有输入中丢失焦点时，如何强制模糊事件才会触发？

Answer 1

编辑：根据OP提供的更多输入更新答案。

如果稍微延迟一秒钟来隐藏标签就可以了，那么你可以使用setTimeout / clearTimeout组合.. 类似的东西：

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>
<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

<div class="control">
    <label>My Control</label>
    <input type="text" />
    <input type="text" />
    <input type="text" />
</div>

    <script type="text/javascript"> 
        var timeoutIds = [];
            $('.control').each(function(index, el){
                $(':input', el).bind('focus', function(e){     
                        clearTimeout(timeoutIds[index]);
                        $(this).prevAll('label').animate({        
                                'left': '-50px'     
                        }); 
                });

                $(':input', el).bind('blur', function(e){     
                        var that = this;
                        timeoutIds[index] = setTimeout(function(){
                            $(that).prevAll('label').animate({        
                                    'left': '0px' 
                            }); 
                    }, 500);
                });
            });
    </script>

工作示例：http://jsfiddle.net/Tn9sV/2/

Answer 2

在你的模糊回调中，我会看一下1.6中引入的:focus选择器：

Using jQuery to test if an input has focus

如果$('.control :focus).length > 0然后return阻止其运行的功能。

Answer 3

我在过去通过将新焦点绑定到文档或表单来实现类似的操作，并触发标签返回，而不是将模糊绑定到输入。

Answer 4

在blur回调中，您可以使用此$("input:focus").length检测是否现在关注了任何输入元素。如果length>0比不动画

<强>更新

这段代码怎么样？

    var control;
    var inTheSameControl=false;
    $('.control :input').bind('focus', function(e){
        if(control)
        {
            if(control.find(this).length>0)
                inTheSameControl=true;
            else
                inTheSameControl=false;
        }
        control=$(this).parent();
        if(!inTheSameControl)
        {
            console.log('focus');
        }
    });
    $('.control :input').bind('blur', function(e){
        if(!inTheSameControl)
        {
            console.log('blur');
        }
    });

适用于多个div.control 当您将焦点切换到另一个input中的.contor时，文本“焦点”会记录到控制台中，如果您保持在同一个.control - 则不会。而不是console.log(...)你可以写下你想要的东西。我没有写你的代码（动画），因为它不是主题。

我希望它会有所帮助。

Answer 5

我能想到的两个选择：

选项1（使用当前方案）：
- 模糊：。将动画延迟一秒钟
- 焦点：。停止现有动画
选项2（更改模糊项目）：
- 将模糊项目变为div而不是标签

jQuery事件;防止“兄弟姐妹”触发每个人的事件

5 个答案: