Question

我知道那里有数百个类似的问题，相信我的时候说我读了很多，但问题仍然存在。如果我有输入 tag id =“input1”和select id =“list1”，我想要上/下箭头键在输入组件中按下以在选择列表中移动所选选项相应地向上或向下。

我已设置select标记的值，以便选项列表中的第一个项目已选中，但此代码不起作用。我已经检查了绑定了 keydown事件工作正常，我已经尝试暂时将焦点设置为在触发keyup / keydown / keypress（所有尝试过）事件之前选择选择组件。我是否应该专注于选择组件然后在触发按键事件之前触发选择或更改事件？

        deflectEvent = function(event) {
            if((event.which == $.ui.keyCode.UP) ||
              (event.which == $.ui.keyCode.DOWN)) {
                //$('#list1').focus(); //.focus().click();
                $('#list1').trigger(event);
                //$('#input1').focus();
                return false;
            };
        }
        jQuery(function($){$('#input1').bind('keydown',deflectEvent)});

我观察到的事情，是错误的，没有。在IE8上我可以按一个箭头键然后得到使用$（'＃list1'）焦点转移.focus（）。focus（）。click（）;但在铬我甚至不能做此

我知道jquery模拟插件，虽然我没有设法跟踪关于它的任何使用例子。例如，如果您模拟按键事件，你如何指定按下哪个键？

感谢。

Answer 1

这是你追求的吗？

$(document).ready(function(){
deflectEvent = function(event) {
    var noOfListItems = $("#list1 > option").length-1;
    var curListItem = $("#list1")[0].selectedIndex;
    if(event.which == $.ui.keyCode.UP) {
         // Decrement the selection by one, unless that will be less than zero, then go to the last option
        var nextListitem = (curListItem-1 < 0) ? noOfListItems : curListItem-1;
        $("#list1")[0].selectedIndex = nextListitem;
    }
    if(event.which == $.ui.keyCode.DOWN){
         // Increment the selection by one, unless that will be more than the number of options, then go to the first option
        var nextListitem = (curListItem+1 > noOfListItems) ? 0 : curListItem+1;
        $("#list1")[0].selectedIndex = nextListitem;
    }
}

jQuery(function($){$('#input1').bind('keydown',deflectEvent)});
});

jsFiddle version

Answer 2

以下是工作示例http://jsfiddle.net/FEnnA/我在IE 8.0 FF 3.5,4,5,6和Chrome（idk Chrome版本）中进行了测试。

HTML：

<input type="text" />
<input type="text" />
<input type="text" />

CSS：

input{
    display:block;
}

JS：

$('input').keydown(function(e){
    if (e.keyCode == 38) {
       $(this).prev().focus();   
    }    
    if (e.keyCode == 40) {
       $(this).next().focus();
    }
});

jquery：输入标签中的向上/向下箭头键选择<select> item </select>

2 个答案: