0

私はテキストボックスを持っています。クリックまたは単語のタイプでユーザーにいくつかの提案が表示されます.問題は、提案が表示され、テキストボックス内の上下キーを使用して提案に移動することです.

以下はコードです：

<label>when</label>
                        <div class="fl">
                            <input class="date-field startdate cornerall" type="text"/>
                            <div class="input-wrapper">
                            <input type="text" class="starttime cornerall" placeholder="Add a Time?"/>
                            <div class="dropdown stsugstn hidden">
                            <ul class="result cornerall">
                                <li class="sugactive">11.05</li>
                                <li>11.05</li>
                                <li>11.05</li>
                                <li>11.05</li>
                                <li>11.05</li>
                            </ul>
                            </div>
                            </div>
                            <a href="#" class="timezone title-tip" title="IST">GMT+5:30</a>
                            <a href="#" class="endtimeln">End Time?</a>               
                        </div>

それぞれのjquery:

$('.cnewrap').on({
        keyup: function(e){
            var $this = $(this);
            var $vl = $this.val();
            var $st = $this.parent().find('.stsugstn');
            var key = (e.keyCode ? e.keyCode : e.which);
            if($vl != null && $vl.length > 0){
                if($st.hasClass( "hidden" )){
                    $st.removeClass('hidden');
                }
                if (key === 38 || key === 40){
                    //TODO write code to stop navigation inside text box
                    //$this.val($vl);
                }
            }else{
                if(!$st.hasClass( "hidden" )){
                    $st.addClass('hidden');
                }

            }
        },
        click: function(e){
            var $this = $(this);
            var $vl = $this.val();
            var $st = $this.parent().find('.stsugstn');
            if($vl != null && $vl.length > 0 && $st.hasClass( "hidden" )){
                $st.removeClass('hidden');
            }

        }
    },'.starttime');

提案間を移動するための jquery:

$(window).on('keyup', function(e){
        var $stsugstn = $('.stsugstn');
        var $etsugstn = $('.etsugstn');
        var $next = '';
        var key = (e.keyCode ? e.keyCode : e.which);
        if($stsugstn!= null && $stsugstn.length > 0 && !$stsugstn.hasClass( "hidden" )){
            var $current = $('.stsugstn ul li.sugactive');
            if (key === 38){
                if($current.is(':first-child')){
                    $next = $('.stsugstn ul li:last-child');
                }else{

                    $next = $current.prev();
                }
            }
            if (key === 40){
                if($current.is(':last-child')){
                    $next = $('.stsugstn ul li:first-child');
                }else{
                    $next = $current.next();
                }
            }

            if ($next.length > 0) {
                $current.removeClass('sugactive');
                $next.addClass('sugactive');
            }
        }
        if($etsugstn!= null && $etsugstn.length > 0 && !$etsugstn.hasClass( "hidden" )){
            var $current = $('.etsugstn ul li.sugactive');
            if (key === 38){
                if($current.is(':first-child')){
                    $next = $('.etsugstn ul li:last-child');
                }else{

                    $next = $current.prev();
                }
            }
            if (key === 40){
                if($current.is(':last-child')){
                    $next = $('.etsugstn ul li:first-child');
                }else{
                    $next = $current.next();
                }
            }

            if ($next.length > 0) {
                $current.removeClass('sugactive');
                $next.addClass('sugactive');
            }
        }
    });

jsfiddleで提案されているように、上下キーを使用して提案内をナビゲートしているときに、テキストボックス内のナビゲートを停止する方法を提案してください。ここにリンクがあります http://jsfiddle.net/Brg9t/

4

1 に答える 1

0

でイベントをトリガーします。keydownこれは、ブラウザーの動作が で既に行われているか、その時点では機能しkeyupないためです。preventDefaultreturn false

に変更keyupして //todo 部分をkeydown追加すればOKです。return falseここのフィドルを参照してくださいhttp://jsfiddle.net/Brg9t/1/。

于 2013-09-29T09:26:17.170 に答える