Question

我现在正在撕开我的头发......我无法弄清楚如何让jQuery $("thing").is(":focus")选择器在我的代码中使用<select>标记。这就是我所拥有的：

<input id="uText" name="uText" type="text" required/>
<select id="uCarrier" name="uCarrier" style="display: none;"> 
   <option value="NULL" selected="selected">Select One</option>
   <option value="AT&amp;T">AT&amp;T</option>
</select>

用这个js

$("#uText").on("focus", function()
{
    if ( !$("#uCarrier").is(":visible") )
    {
        $(this).stop(true).animate({width:"50%"},400);
        $("#uCarrier").stop(true).hide().delay(400).fadeIn(400);
    }
});


$("#uText").on("blur", function()
{
    if ( !$("#uCarrier").is(":focus") )
    {
        $("#uCarrier").stop(true).fadeOut(400);
        $($("#uText")).stop(true).show().delay( 400 ).animate({width: "96%"}, 400);
    }
});

有没有人有这个难题的解决方案??！？

Answer 1

这是因为blur事件在焦点转移到select元素之前触发。您可以使用演示小提琴中添加的日志语句查看事件序列。

这里的一个可能的解决方案是使用setTimeout检查下面给出的focus条件，它将条件的执行延迟几毫秒，焦点将转移到目标元素< / p>

$("#uText").on("blur", function() {
    setTimeout(function(){
        if ( !$("#uCarrier").is(":focus") ){
            $("#uCarrier").stop(true).fadeOut(400);
            $($("#uText")).stop(true).show().delay( 400 ).animate({width: "96%"}, 400);
        }        
    }, 20)    
});

演示：Fiddle

Answer 2

所以这就是你网页上发生的事情：

您选择文本框。
选择后，您会使用<select>处理程序显示onFocus。
您按以下顺序点击<select>，这会导致两件事情发生：
<input>运行其blur处理程序。
<select>获得焦点。

所以Arun是对的：你只需要做setTimeout等待几毫秒的时间让选择框获得焦点。：d

祝你的项目好运！

抓取<select>标记焦点事件</select>时遇到问题

2 个答案: