3

我正在研究一种场景，在该场景中，用户将在隐藏元素中输入一个选项卡。当该输入集中时，我希望它的父元素，隐藏元素，使用 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>

​</p>

和 jQuery：

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

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

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

4

2 回答 2

5

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

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

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/

于 2012-12-18T16:54:48.777 回答
1

您无法使用 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;
    }
})

使用此代码，当您在可见输入上点击选项卡时，我们会显示隐藏的输入并将其聚焦。

于 2012-12-18T16:55:07.150 回答