在隐藏元素内跳转到输入

Question

我正在处理用户在隐藏元素内跳转到输入内容的场景。当这个输入集中时，我希望它的父对象是隐藏的元素，用jQuery来显示。到目前为止，我似乎无法得到这个工作。

这是我的HTML看起来像：

<div class="select"> 
<input tabindex="1" type="text" name="search" class="address" id="address-1" placeholder="Tab to the next input."> 
<div class="dropdown"> 
    <div class="dropdown-search"> 
     <input tabindex="2" type="text" name="search" class="search" id="dropdown-search-1" placeholder="Type to search..."> 
    </div>    
</div> 

和jQuery的：

$('.select').each(function() { 
    var dropdown = $('.dropdown', this), 
     search = $('.search', this); 

    search.focus(function() { 
     dropdown.show(); 
    }); 
});​ 

我也把我的代码在这里：http://jsfiddle.net/ae26u/1/

Answer 1

一诀窍来解决这个问题就是将元素隐藏在屏幕上，而不是实际上h来自DOM的idden。

如果它隐藏在屏幕外面，它仍然是“绘制”的，所以您可以将它放入，然后在选项卡上将它移回到屏幕上。

的jQuery：

$('.select').each(function() { 
    var dropdown = $('.dropdown', this), 
     search = $('.address', this); 

    dropdown.focus(function() { 
     console.log('show'); 
     dropdown.css("left", "0px") 
    }); 
});​ 

HTML：

<div class="select"> 
    <input tabindex="1" type="text" name="search" class="address" id="address-1" placeholder="Tab to the next input."><br /> 
    <input tabindex="2" type="text" name="search" class="dropdown" id="dropdown-search-1" placeholder="Type to search..."> 
</div> 

的jsfiddle例如：http://jsfiddle.net/ae26u/7/

Answer 2

不能集中使用Tab键一个隐藏的元素。但你可以使用JavaScript来触发它。

例子：

$('.select .address').keydown(function(event) { 
    // 9 == tab key code 
    if (event.keyCode == 9) { 
     // Find the dropdown ... 
     var dropdown = $(this).parent().find('.dropdown'); 

     // ... and show it 
     dropdown.show(); 

     // Focus the input in the dropdown 
     dropdown.find('.search').focus(); 

     return false; 
    } 
}) 

有了这个代码，当你打的可见输入选项卡中，我们显示隐藏的输入，我们关注它。