4

<select>タグよりも優れたデザインのために、独自のコンボボックスを作成しています。

ところで、キーボードの矢印キーで<span>(またはその他の<p>...) 間を移動できるようにする方法と、「タブ」キーで提案を表示する方法を知りたいです。タグ<option>の のように。<select>

これは私がそれを機能させたい場所です:

HTML

<input type="text" id="myInput" value=""/>
<div id="myDiv">
    <span>Value 1</span>    
    <span>Value 2</span>
    <span>Value 3</span>
</div>

CSS

#myDiv {display:none;border:1px solid #000;}
span  {display:block;background:#EDEDED;cursor:pointer;}
span:hover {background:#555;color:#FFF;}

JS

$(document).ready(function(){
    $('#myInput').focus(function(){
        $('#myDiv').slideDown();
    });    

    $('span').click(function(){
         $('#myInput').val($(this).html());
         $('#myDiv').slideUp();
    });
});​

ここでテストできます: http://jsfiddle.net/eHpKX/2/

編集例：たとえば、入力をクリックまたはタブしてから、矢印キーを使用してナビゲートします...動作しません。

どんな助けでも大歓迎です。

4

1 に答える 1

3

uparrowおよびdownarrow選択ドロップダウンのように動作するためのキーダウンハンドラーを作成しました。ただし、キーには次のフィールドへのタブ移動という特定の役割があるため、ブラウザーの動作tabを望んでいませんでした。prevtDefault以下のコードを参照してください。そこからさらにビルドできます。

デモ

CSS:

span.active {background:#555;color:#FFF;}

JS:

$(document).ready(function() {
    $('#myInput').focus(function() {
        if ($('#myDiv span.active').length == 0) {
            $('#myDiv span:first').addClass('active');
        }
        $('#myDiv').slideDown();
    }).focusout(function() {
        $('#myDiv').slideUp();
    });
    $('span').click(function() {
        $('#myInput').val($(this).html());
    }).mouseenter(function() {
        $('#myDiv span').removeClass('active');
    }).keydown(function(e) {
        alert(e.which);

    });

    //keydown event
    $('#myInput').keydown(function(e) {
        var $actvOpt = $('#myDiv span.active');
        if (e.which == 13) { //enter key
            if ($actvOpt.length != 0) {
                $(this).val($actvOpt.text());
                $('#myDiv').slideUp();
            }
            return;
        }

        var actvIndex = $actvOpt.removeClass('active').index();
        var optCount = $('#myDiv span').length;

        if (e.which == 40) { //keydown
            actvIndex += 1;
        } else if (e.which == 38) { //keydown
            actvIndex -= 1;
        }

        if (actvIndex < 0) actvIndex = optCount - 1;
        else if (actvIndex >= optCount) actvIndex = 0;

        $('#myDiv span:eq(' + actvIndex + ')').addClass('active');

        $actvOpt = $('#myDiv span.active');
        $(this).val($actvOpt.text());        
    });
});
于 2012-04-13T18:40:04.527 に答える