如何使用箭头键实现<span>之间的导航

How to implement navigation between <span> with the arrow keys?

本文关键字：span 之间 导航 何使用 实现      更新时间：2023-09-26

我正在制作自己的组合框，以获得比<select>标签更好的设计。

顺便说一句，我想知道，如何使用键盘的箭头键在<span>（或其他<p>......）之间进行导航，并使用"tab"键显示建议。就像<select>标签的<option>。

这就是我想让它工作的地方：

.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/

编辑示例：例如，单击输入中的或 Tab 键，然后使用箭头键导航...它不起作用。

任何帮助将不胜感激。

我为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());        
    });
});
相关文章：