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

タブキーで非表示の要素にフォーカスすることはできません。ただし、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 に答える