jquery - 按 T​​ab 键进入隐藏元素内的输入

Question

我正在研究一个场景，在该场景中，用户可以通过 Tab 键进入隐藏元素内的输入。当该输入获得焦点时，我希望使用 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

解决这个问题的一个技巧是将元素隐藏在屏幕之外，而不是实际隐藏在 DOM 中。

如果它隐藏在屏幕之外，它仍然是“绘制的”，因此您可以使用 Tab 键进入它，然后在选项卡上将其移回屏幕上。

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/