jquery：输入标签中的向上/向下箭头键更改选择的<select>项目答案

【问题标题】：jquery: arrow up/down keys in input tag change selected <select> itemjquery：输入标签中的向上/向下箭头键更改选择的<select>项目
【发布时间】：2011-11-03 02:55:46
【问题描述】：

我知道有数百个类似的问题，请相信我说我已经阅读了很多，但问题仍然存在。如果我有意见标签 id="input1" 和选择 id="list1"，我想要向上/向下箭头键时在输入组件中按下以在选择列表中移动选定的选项相应地向上或向下。

我已经设置了选择标签的值，以便选项列表中的第一项已选中，但此代码不起作用。我已经检查了绑定 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(); 转移焦点但在 chrome 上我什至做不到这个。

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

谢谢。

【问题讨论】：

如果下面的答案不是您想要的，我深表歉意，但我对您到底想要什么感到困惑。
不用担心，感谢您不厌其烦地回复。

标签： jquery

【解决方案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

【讨论】：

你打赌这就是我要找的东西，感谢你不厌其烦地把这个词完美地插入到我的代码中，它工作得很好。读到这里让我意识到我需要读一些东西。虽然我可以从一般意义上理解上面的代码，但您能否指出任何描述与各种标签相关的属性和事件的文档的方向？我只是在学习。谢谢，你是一个该死的超级巨星。
完全没有问题！这段代码中唯一真正不寻常的属性是 selectedIndex 和 .length 用作选择器的属性。 selectedIndex 只是与当前选定选项关联的数字（从 0 开始，因此选项 1 的索引为 0，选项 2 的索引为 1）。 length 作为 jquery 选择器的一个属性，只返回选择器匹配的元素数（在本例中，选择框中的选项数），因为它从 1 开始计数，我们必须将其减 1 以匹配指数。唯一的事件是您在代码中的相同 keydown 事件:)

【解决方案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();
    }
});

【讨论】：